"use client";

import { useState, type FormEvent } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/Icon";
import { api } from "@/lib/client";
import { useT } from "@/components/providers";

export interface MemberDetail {
  public_uuid: string;
  full_name: string;
  governorate_name: string | null;
  formal_status_ar: string;
  formal_status_code: string;
  suspension_until: string | null;
  suspension_expired: boolean;
  secretariat_id: number | null;
  secretariat_name: string | null;
  id: number;
  membership_no: string | null;
  record_source: string;
  verified_at: string | null;
  is_demo: boolean;
  created_at: string;
}

export interface ContactMasked {
  maskedPhone: string | null;
  maskedEmail: string | null;
  verification: string;
}

interface HistoryItem {
  id: number;
  effective_from: string;
  to_status_ar: string;
  from_status_ar: string | null;
  reason: string;
  decision_ref: string | null;
  decided_by: string | null;
  suspension_until: string | null;
}

interface PositionItem {
  id: number;
  title_ar: string;
  appointment_decision_ref: string;
  started_on: string | null;
  ended_on: string | null;
  unit_id: number;
  unit_name: string;
  unit_kind: string;
}

const fmtDate = (d: string) =>
  new Intl.DateTimeFormat("ar-EG", { dateStyle: "medium", timeZone: "Africa/Cairo" }).format(new Date(d));

export function MemberProfile({
  member,
  contactMasked,
  history,
  statuses,
  positions,
  canManage,
  canSeeContact,
}: {
  member: MemberDetail;
  contactMasked: ContactMasked | null;
  history: HistoryItem[];
  statuses: { code: string; name_ar: string }[];
  positions: PositionItem[];
  canManage: boolean;
  canSeeContact: boolean;
}) {
  const router = useRouter();
  const [message, setMessage] = useState<{ kind: "ok" | "err"; text: string } | null>(null);
  const [revealed, setRevealed] = useState<{ phonePrimary: string | null; email: string | null } | null>(null);
  const [busy, setBusy] = useState(false);
  const [statusChoice, setStatusChoice] = useState<string>("");
  const { t, locale } = useT();

  const isSuspended = member.formal_status_code === "suspended";

  async function run(fn: () => Promise<{ status: number; error: string | null }>, okText: string) {
    setBusy(true);
    setMessage(null);
    const r = await fn();
    setBusy(false);
    if (r.status >= 200 && r.status < 300) {
      setMessage({ kind: "ok", text: okText });
      router.refresh();
    } else {
      setMessage({ kind: "err", text: r.error ?? t.members.opFailed });
    }
  }

  async function revealContact() {
    setBusy(true);
    const res = await api<{ phonePrimary: string | null; email: string | null }>(`/api/members/${member.public_uuid}/contact`);
    setBusy(false);
    if (res.status === 200 && res.data) {
      setRevealed(res.data);
      setMessage({ kind: "ok", text: t.members.revealedNote });
    } else {
      setMessage({ kind: "err", text: res.error ?? t.members.opFailed });
    }
  }

  async function saveContact(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    await run(
      () =>
        api(`/api/members/${member.public_uuid}/contact`, "PUT", {
          phonePrimary: String(form.get("phone") ?? "").trim() || null,
          email: String(form.get("email") ?? "").trim() || null,
          consentContact: form.get("consent") === "on",
          consentNoticeVersion: String(form.get("notice") ?? "").trim() || null,
        }),
      t.members.contactSaved,
    );
  }

  async function archive() {
    const reason = window.prompt("t.members.archivePrompt");
    if (!reason || reason.trim().length < 5) return;
    await run(() => api(`/api/members/${member.public_uuid}/archive`, "POST", { reason }), t.members.archived);
    router.push("/dashboard/members");
  }

  async function changeStatus(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    const toStatusCode = String(form.get("status") ?? "");
    if (!toStatusCode) return;
    const body: Record<string, unknown> = {
      toStatusCode,
      reason: String(form.get("reason") ?? "").trim(),
      decisionRef: String(form.get("decisionRef") ?? "").trim() || null,
      decidedBy: String(form.get("decidedBy") ?? "").trim() || null,
    };
    if (toStatusCode === "suspended") body.suspensionUntil = String(form.get("suspensionUntil") ?? "").trim() || null;
    await run(() => api(`/api/members/${member.public_uuid}/status`, "POST", body), t.members.statusChanged);
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-2 text-sm">
        <Link href="/dashboard/members" className="font-bold text-bousla-700 hover:text-bousla-800">← {t.nav.members}</Link>
        <span className="text-slate-300">/</span>
        <span className="text-slate-500" dir="auto">{member.full_name}</span>
      </div>

      {message && (
        <div role="status" className={`rounded-lg border px-4 py-2.5 text-sm ${message.kind === "ok" ? "border-emerald-200 bg-emerald-50 text-emerald-800" : "border-red-200 bg-red-50 text-red-700"}`}>
          {message.text}
        </div>
      )}

      <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-card">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div>
            <h1 className="text-2xl font-extrabold text-slate-900" dir="auto">
              {member.full_name}
              {member.is_demo && <span className="mr-2 align-middle rounded-full bg-amber-50 px-2 py-0.5 text-[11px] font-bold text-amber-700">DEMO</span>}
            </h1>
            <dl className="mt-3 grid grid-cols-2 gap-x-8 gap-y-2 text-sm sm:grid-cols-3">
              <div>
                <dt className="text-xs text-slate-400">{t.members.governorate}</dt>
                <dd className="font-semibold text-slate-700">{member.governorate_name ?? t.members.notSpecified}</dd>
              </div>
              <div>
                <dt className="text-xs text-slate-400">{t.members.formalStatus}</dt>
                <dd className="font-semibold text-slate-700">
                  {member.formal_status_ar}
                  {isSuspended && member.suspension_until && (
                    <span className="mr-1 text-xs font-normal text-slate-500">{t.members.until} {fmtDate(member.suspension_until)}</span>
                  )}
                  {isSuspended && !member.suspension_until && (
                    <span className="mr-1 text-xs font-normal text-slate-500">— {t.members.indefinite}</span>
                  )}
                </dd>
                {member.suspension_expired && (
                  <p className="mt-1 text-xs font-bold text-red-600">
                    {t.members.suspensionExpired}
                  </p>
                )}
              </div>
              <div>
                <dt className="text-xs text-slate-400">{t.members.secretariat}</dt>
                <dd className="font-semibold text-slate-700">
                  {member.secretariat_name ? (
                    <Link href={`/dashboard/structure/${member.secretariat_id}`} className="text-bousla-700 hover:underline" dir="auto">
                      {member.secretariat_name}
                    </Link>
                  ) : (
                    <span className="text-slate-400">{t.members.secretariatNotSet}</span>
                  )}
                </dd>
              </div>
              <div>
                <dt className="text-xs text-slate-400">{t.members.systemNo}</dt>
                <dd className="numeric font-semibold text-slate-700" dir="ltr">{member.id}</dd>
              </div>
              <div>
                <dt className="text-xs text-slate-400">{t.members.membershipNo}</dt>
                <dd className="numeric font-semibold text-slate-700" dir="ltr">{member.membership_no ?? "—"}</dd>
              </div>
              <div>
                <dt className="text-xs text-slate-400">{t.members.recordSource}</dt>
                <dd className="font-semibold text-slate-700" dir="ltr">{member.record_source}</dd>
              </div>
              <div>
                <dt className="text-xs text-slate-400">{t.members.publicId}</dt>
                <dd className="numeric font-mono text-xs text-slate-500" dir="ltr">{member.public_uuid}</dd>
              </div>
              <div>
                <dt className="text-xs text-slate-400">{t.members.createdAt}</dt>
                <dd className="font-semibold text-slate-700">
                  {new Intl.DateTimeFormat("ar-EG", { dateStyle: "medium", timeZone: "Africa/Cairo" }).format(new Date(member.created_at))}
                </dd>
              </div>
              <div>
                <dt className="text-xs text-slate-400">{t.members.verified}</dt>
                <dd className="font-semibold text-slate-700">{member.verified_at ? t.members.verifiedYes : t.members.verifiedNo}</dd>
              </div>
            </dl>
          </div>
          {canManage && (
            <button onClick={archive} disabled={busy} className="rounded-lg border border-red-200 px-3 py-1.5 text-xs font-bold text-red-700 transition hover:bg-red-50 disabled:opacity-50">
              {t.members.archive}
            </button>
          )}
        </div>
      </section>

      <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-card">
        <h2 className="mb-4 flex items-center gap-2 font-bold text-slate-900">
          <Icon name="lock" className="h-5 w-5 text-bousla-700" /> {t.members.contactSection}
        </h2>
        {contactMasked ? (
          <div className="space-y-3 text-sm">
            <p className="rounded-lg bg-slate-50 px-4 py-2.5 text-slate-600">
              {t.members.phone}: <span dir="ltr">{revealed?.phonePrimary ?? contactMasked.maskedPhone}</span> · {t.members.email}: <span dir="ltr">{revealed?.email ?? contactMasked.maskedEmail}</span> · {t.members.verified}: {contactMasked.verification}
            </p>
            {canSeeContact ? (
              <button onClick={revealContact} disabled={busy} className="rounded-lg border border-bousla-200 px-3 py-1.5 text-xs font-bold text-bousla-800 hover:bg-bousla-50 disabled:opacity-50">
                {t.members.reveal}
              </button>
            ) : (
              <p className="text-xs text-slate-400">{t.members.revealNeedsPerm} <code dir="ltr">members.view_contact_details</code></p>
            )}
          </div>
        ) : (
          <p className="text-sm text-slate-400">{t.members.noContact}</p>
        )}
        {canManage && (
          <form onSubmit={saveContact} className="mt-5 grid gap-4 border-t border-slate-100 pt-5 sm:grid-cols-2">
            <div>
              <label htmlFor="c-phone" className="mb-1 block text-xs font-bold text-slate-600">{t.members.phone}</label>
              <input id="c-phone" name="phone" dir="ltr" inputMode="numeric" className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-left outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100" />
            </div>
            <div>
              <label htmlFor="c-email" className="mb-1 block text-xs font-bold text-slate-600">{t.members.email}</label>
              <input id="c-email" name="email" type="email" dir="ltr" className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-left outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100" />
            </div>
            <div className="flex items-center gap-2">
              <input id="c-consent" name="consent" type="checkbox" className="h-4 w-4 accent-bousla-700" />
              <label htmlFor="c-consent" className="text-xs font-semibold text-slate-600">{t.members.consent}</label>
            </div>
            <div>
              <label htmlFor="c-notice" className="mb-1 block text-xs font-bold text-slate-600">{t.members.noticeVersion}</label>
              <input id="c-notice" name="notice" dir="ltr" placeholder="v1" className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-left outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100" />
            </div>
            <div className="sm:col-span-2">
              <button type="submit" disabled={busy} className="rounded-lg bg-bousla-700 px-4 py-2 text-sm font-bold text-white hover:bg-bousla-800 disabled:opacity-60">
                {t.members.saveContact}
              </button>
            </div>
          </form>
        )}
      </section>

      {positions.length > 0 && (
        <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-card">
          <h2 className="mb-4 flex items-center gap-2 font-bold text-slate-900">
            <Icon name="sitemap" className="h-5 w-5 text-bousla-700" /> {t.members.positions}
          </h2>
          <ul className="space-y-3">
            {positions.map((p) => (
              <li key={p.id} className={`rounded-lg border px-4 py-3 text-sm ${p.ended_on ? "border-slate-100 bg-slate-50/60 opacity-75" : "border-slate-100 bg-white"}`}>
                <div className="flex flex-wrap items-center justify-between gap-2">
                  <span className="font-bold text-slate-700" dir="auto">
                    {p.title_ar}
                    <span className="mr-2 text-xs font-normal text-slate-500">
                      — <Link href={`/dashboard/structure/${p.unit_id}`} className="text-bousla-700 hover:underline" dir="auto">{p.unit_name}</Link>
                    </span>
                  </span>
                  {p.ended_on ? <span className="text-xs text-slate-400">{t.members.positionEnded} {p.ended_on}</span> : <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-bold text-emerald-700">{t.members.positionActive}</span>}
                </div>
                <p className="mt-1 text-xs text-slate-400">{t.members.decisionRef}: {p.appointment_decision_ref}{p.started_on ? ` · ${t.structure.from} ${p.started_on}` : ""}</p>
              </li>
            ))}
          </ul>
        </section>
      )}

      <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-card">
        <h2 className="mb-4 flex items-center gap-2 font-bold text-slate-900">
          <Icon name="clock" className="h-5 w-5 text-bousla-700" /> {t.members.statusHistory}
        </h2>
        {history.length === 0 ? (
          <p className="text-sm text-slate-400">{t.members.noChanges}</p>
        ) : (
          <ol className="space-y-3">
            {history.map((h) => (
              <li key={h.id} className="rounded-lg border border-slate-100 bg-slate-50/60 px-4 py-3 text-sm">
                <div className="flex flex-wrap items-center justify-between gap-2">
                  <span className="font-bold text-slate-700">
                    {h.from_status_ar ? `${h.from_status_ar} ← ${h.to_status_ar}` : `${t.members.initialAssignment}: ${h.to_status_ar}`}
                    {h.suspension_until && <span className="mr-1 text-xs font-normal text-slate-500">({t.members.until} {fmtDate(h.suspension_until)})</span>}
                  </span>
                  <span className="text-xs text-slate-400">
                    {fmtDate(h.effective_from)}
                  </span>
                </div>
                <p className="mt-1 text-xs text-slate-500">{t.members.reason}: {h.reason}{h.decision_ref ? ` · ${t.members.decisionRef}: ${h.decision_ref}` : ""}</p>
              </li>
            ))}
          </ol>
        )}

        {canManage && statuses.length > 0 && (
          <form onSubmit={changeStatus} className="mt-5 grid gap-4 border-t border-slate-100 pt-5 sm:grid-cols-2">
            <div>
              <label htmlFor="st-status" className="mb-1 block text-xs font-bold text-slate-600">{t.members.newStatus}</label>
              <select
                id="st-status"
                name="status"
                required
                value={statusChoice}
                onChange={(e) => setStatusChoice(e.target.value)}
                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100"
              >
                <option value="" disabled>{t.members.pickStatus}</option>
                {statuses.filter((s) => s.code !== member.formal_status_code).map((s) => (
                  <option key={s.code} value={s.code}>{s.name_ar}</option>
                ))}
              </select>
            </div>
            {statusChoice === "suspended" && (
              <div>
                <label htmlFor="st-until" className="mb-1 block text-xs font-bold text-slate-600">
                  {t.members.untilDate}
                </label>
                <input
                  id="st-until"
                  name="suspensionUntil"
                  type="date"
                  min={new Date().toISOString().slice(0, 10)}
                  className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100"
                />
                <p className="mt-1 text-[11px] text-slate-400">{t.members.untilHint}</p>
                <div className="mt-2 flex flex-wrap gap-1.5">
                  {[
                    { label: locale === "ar" ? "درجة أولى: 1-3 أشهر (م14)" : "Degree 1: 1-3 months", months: 1 },
                    { label: locale === "ar" ? "درجة ثانية: 3-6 أشهر (م14)" : "Degree 2: 3-6 months", months: 3 },
                  ].map((p) => (
                    <button
                      key={p.months}
                      type="button"
                      onClick={() => {
                        const el = document.querySelector<HTMLInputElement>("#st-until");
                        if (!el) return;
                        const d = new Date();
                        d.setMonth(d.getMonth() + p.months + 2);
                        d.setDate(d.getDate() - 2);
                        el.value = d.toISOString().slice(0, 10);
                      }}
                      className="rounded-md border border-slate-200 px-2 py-1 text-[11px] font-semibold text-slate-500 hover:bg-slate-50"
                    >
                      {p.label}
                    </button>
                  ))}
                </div>
              </div>
            )}
            <div className="sm:col-span-2">
              <label htmlFor="st-reason" className="mb-1 block text-xs font-bold text-slate-600">{t.members.reasonLabel}</label>
              <input
                id="st-reason"
                name="reason"
                required
                minLength={5}
                maxLength={500}
                placeholder="{t.members.reasonPlaceholder}"
                className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100"
              />
            </div>
            <div>
              <label htmlFor="st-ref" className="mb-1 block text-xs font-bold text-slate-600">{t.members.decisionRef} ({t.common.optional})</label>
              <input id="st-ref" name="decisionRef" dir="auto" maxLength={255} className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100" />
            </div>
            <div>
              <label htmlFor="st-by" className="mb-1 block text-xs font-bold text-slate-600">{t.members.decisionBy} ({t.common.optional})</label>
              <input id="st-by" name="decidedBy" dir="auto" maxLength={100} className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100" />
            </div>
            <div className="sm:col-span-2">
              <button type="submit" disabled={busy || !statusChoice} className="rounded-lg bg-bousla-700 px-4 py-2 text-sm font-bold text-white hover:bg-bousla-800 disabled:opacity-60">
                {t.members.changeStatus}
              </button>
            </div>
          </form>
        )}
        <p className="mt-4 text-xs text-slate-400">
          {t.members.g3Note}
        </p>
      </section>
    </div>
  );
}