// components/DirectorStep.tsx
"use client";

import type { DirectorInput, Section69 } from "@/lib/wizard-types";

function Section69Questions({ section69, onUpdate }: { section69: Section69; onUpdate: (s: Section69) => void }) {
  const qs: { key: keyof Section69; label: string }[] = [
    { key: "q1_probation",                label: "Are you a person who has been placed under probation by a court in terms of section 162, or in terms of section 47 of the Close Corporations Act, 1984?" },
    { key: "q2_court_prohibited",          label: "Has a court prohibited you to be a director, or declared you to be delinquent in terms of section 162?" },
    { key: "q3_unrehabilitated_insolvent", label: "Are you an unrehabilitated insolvent?" },
    { key: "q4_public_regulation",         label: "Are you prohibited in terms of any public regulation to be a director of the company?" },
    { key: "q5_removed_from_office",       label: "Were you removed from an office of trust, on grounds of misconduct involving dishonesty?" },
    { key: "q6_convicted_offence",          label: "Were you convicted and imprisoned without the option of a fine, or fined more than the prescribed amount, for theft, fraud, forgery, perjury or an offence?" },
  ];

  return (
    <div className="space-y-4">
      {qs.map((q) => {
        const val = section69[q.key];
        return (
          <div key={q.key} className="flex flex-col sm:flex-row sm:items-start sm:gap-4">
            <div className="sm:w-2/3 text-sm text-fg leading-relaxed pt-0.5">{q.label}</div>
            <div className="sm:w-1/3 flex-shrink-0">
              <div className="flex gap-2 mt-1">
                {[true, false].map((opt) => {
                  const active = val === opt;
                  return (
                    <button
                      key={String(opt)}
                      type="button"
                      onClick={() => onUpdate({ ...section69, [q.key]: active ? null : opt })}
                      className={
                        "px-4 py-1.5 rounded text-sm font-semibold border transition-colors " +
                        (active
                          ? opt ? "bg-success text-success-on border-transparent" : "bg-danger text-danger-on border-transparent"
                          : "bg-surface border-border text-muted hover:text-fg")
                      }
                    >
                      {opt ? "Yes" : "No"}
                    </button>
                  );
                })}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

interface Props {
  director: DirectorInput;
  index: number;
  onUpdate: (patch: Partial<DirectorInput>) => void;
}

export default function DirectorStep({ director: d, index, onUpdate }: Props) {
  const updateS69 = (s: Section69) => onUpdate({ section69: s });

  return (
    <div className="border border-border rounded-lg overflow-hidden mb-6 last:mb-0">
      <div className="bg-surface-warm border-b border-border px-5 py-3">
        <p className="text-sm font-bold text-fg">Director {index + 1}</p>
      </div>
      <div className="p-5 space-y-5">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div className="space-y-1.5">
            <label className="text-sm font-semibold text-fg">First names</label>
            <input className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="e.g. Stephanus Johannes" value={d.first_names} onChange={(e) => onUpdate({ first_names: e.target.value })} />
          </div>
          <div className="space-y-1.5">
            <label className="text-sm font-semibold text-fg">Surname</label>
            <input className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="e.g. van der Merwe" value={d.surname} onChange={(e) => onUpdate({ surname: e.target.value })} />
          </div>
          <div className="space-y-1.5">
            <label className="text-sm font-semibold text-fg">SA ID number</label>
            <input type="tel" className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="13-digit SA ID" maxLength={13} value={d.id_no} onChange={(e) => onUpdate({ id_no: e.target.value })} />
          </div>
          <div className="space-y-1.5">
            <label className="text-sm font-semibold text-fg">Date of birth</label>
            <input type="date" className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg focus:outline-none focus:border-accent transition-colors" value={d.date_of_birth} onChange={(e) => onUpdate({ date_of_birth: e.target.value })} />
          </div>
        </div>
        <div className="space-y-1.5">
          <label className="text-sm font-semibold text-fg">Residential address</label>
          <textarea rows={2} className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors resize-none" placeholder="Physical residential address" value={d.residential_address} onChange={(e) => onUpdate({ residential_address: e.target.value })} />
        </div>
        <div className="space-y-1.5">
          <label className="text-sm font-semibold text-fg">Postal address <span className="text-muted font-normal">(leave blank if same as residential)</span></label>
          <textarea rows={2} className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors resize-none" placeholder="Postal address" value={d.postal_address} onChange={(e) => onUpdate({ postal_address: e.target.value })} />
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div className="space-y-1.5">
            <label className="text-sm font-semibold text-fg">Cell phone</label>
            <input type="tel" className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="e.g. 0821234567" value={d.cell_phone} onChange={(e) => onUpdate({ cell_phone: e.target.value })} />
          </div>
          <div className="space-y-1.5">
            <label className="text-sm font-semibold text-fg">Email address</label>
            <input type="email" className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="unique@email.com" value={d.email} onChange={(e) => onUpdate({ email: e.target.value })} />
          </div>
        </div>
        <div className="border-t border-border pt-5">
          <p className="text-sm font-semibold text-fg mb-4">Section 69 — Companies Act 71 of 2008</p>
          <Section69Questions section69={d.section69} onUpdate={updateS69} />
        </div>

        {/* ID document upload — optional. Wizard collects via parent state
            and uploads after successful submit. */}
        <div className="border-t border-border pt-5">
          <label className="text-sm font-semibold text-fg mb-1 block">
            ID document <span className="text-muted font-normal">(optional — PDF / JPG / PNG, ≤ 10 MB)</span>
          </label>
          <p className="text-xs text-muted mb-2">
            File will be saved as <span className="font-mono">ID - {d.first_names || "FirstName"} {d.surname || "Surname"}.&lt;ext&gt;</span>.
          </p>
          <input
            type="file"
            accept="application/pdf,image/jpeg,image/png"
            onChange={(e) => onUpdate({ id_file: e.target.files?.[0] || null } as Partial<DirectorInput>)}
            className="block w-full text-sm text-fg file:mr-3 file:py-1.5 file:px-3 file:rounded file:border file:border-border file:bg-surface-warm file:text-fg file:text-xs file:font-semibold file:cursor-pointer hover:file:bg-accent/10"
          />
          {(d as DirectorInput & { id_file?: File | null }).id_file && (
            <p className="text-xs text-success mt-1">
              ✓ Selected: {(d as DirectorInput & { id_file?: File | null }).id_file?.name}
            </p>
          )}
        </div>
      </div>
    </div>
  );
}