import type { HTMLInputTypeAttribute, ReactNode } from "react";

const controlClass = "w-full rounded-xl border border-border bg-surface-0/70 px-3.5 py-3 text-sm text-fg-primary outline-none transition focus:border-ember/60 focus:ring-2 focus:ring-ember/10";

export function TextField({ label, name, defaultValue, type = "text", required, placeholder, min, max, step }: {
  label: string;
  name: string;
  defaultValue?: string | number | null;
  type?: HTMLInputTypeAttribute;
  required?: boolean;
  placeholder?: string;
  min?: number;
  max?: number;
  step?: string | number;
}) {
  return (
    <label className="flex min-w-0 flex-col gap-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-fg-muted">
      {label}
      <input name={name} type={type} defaultValue={defaultValue ?? ""} required={required} placeholder={placeholder} min={min} max={max} step={step} className={controlClass} />
    </label>
  );
}

export function TextAreaField({ label, name, defaultValue, rows = 4, required, placeholder }: {
  label: string;
  name: string;
  defaultValue?: string | null;
  rows?: number;
  required?: boolean;
  placeholder?: string;
}) {
  return (
    <label className="flex min-w-0 flex-col gap-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-fg-muted">
      {label}
      <textarea name={name} defaultValue={defaultValue ?? ""} rows={rows} required={required} placeholder={placeholder} className={`${controlClass} resize-y leading-6 normal-case tracking-normal`} />
    </label>
  );
}

export function SelectField({ label, name, defaultValue, children }: { label: string; name: string; defaultValue?: string | null; children: ReactNode }) {
  return (
    <label className="flex min-w-0 flex-col gap-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-fg-muted">
      {label}
      <select name={name} defaultValue={defaultValue ?? ""} className={controlClass}>{children}</select>
    </label>
  );
}

export function CheckField({ label, name, defaultChecked, description }: { label: string; name: string; defaultChecked?: boolean; description?: string }) {
  return (
    <label className="flex items-start gap-3 rounded-xl border border-border bg-surface-0/55 px-4 py-3 text-sm text-fg-primary">
      <input type="checkbox" name={name} defaultChecked={defaultChecked} className="mt-0.5 h-4 w-4 accent-[var(--ember)]" />
      <span><strong className="block font-medium">{label}</strong>{description ? <small className="mt-1 block leading-5 text-fg-muted">{description}</small> : null}</span>
    </label>
  );
}

export function FormCard({ title, subtitle, children }: { title: string; subtitle?: string; children: ReactNode }) {
  return (
    <section className="rounded-3xl border border-border bg-surface-1/60 p-5 shadow-[0_24px_80px_rgba(0,0,0,0.16)] md:p-7">
      <div className="mb-6">
        <h2 className="text-xl font-semibold tracking-[-0.025em]">{title}</h2>
        {subtitle ? <p className="mt-2 text-sm leading-6 text-fg-secondary">{subtitle}</p> : null}
      </div>
      {children}
    </section>
  );
}

export function SubmitButton({ children = "Kaydet", danger = false }: { children?: ReactNode; danger?: boolean }) {
  return (
    <button type="submit" className={`rounded-full px-5 py-3 text-[10px] font-semibold uppercase tracking-[0.15em] transition hover:scale-[1.02] ${danger ? "border border-red-500/25 bg-red-500/[0.08] text-red-300" : "bg-ember text-surface-0"}`}>
      {children}
    </button>
  );
}