import Link from "next/link";
import { AlertTriangle, ArrowLeft } from "lucide-react";
import { createOrphanAction } from "@/app/actions/admin";
import { Notice } from "@/components/dashboard/notice";
import { PageHeader } from "@/components/dashboard/page-header";
import { ImageUploadField } from "@/components/forms/image-upload-field";
import { SubmitButton } from "@/components/forms/submit-button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { MISSING_VALUE } from "@/lib/constants";
import { formatDate } from "@/lib/dates";
import { createAdminSupabaseClient } from "@/lib/supabase/admin";

export default async function NewOrphanPage({
  searchParams
}: {
  searchParams: Promise<{ error?: string; duplicates?: string }>;
}) {
  const messages = await searchParams;
  const duplicateIds = (messages.duplicates ?? "")
    .split(",")
    .filter((id) => /^[0-9a-f-]{36}$/i.test(id))
    .slice(0, 10);
  const supabase = createAdminSupabaseClient();
  const { data: duplicateCases } = duplicateIds.length
    ? await supabase
        .from("orphans")
        .select("id,case_number,full_name,date_of_birth,guardian_name,guardian_phone,bank_account_number")
        .in("id", duplicateIds)
    : { data: [] };

  return (
    <>
      <PageHeader
        title="إضافة حالة جديدة"
        description="رقم الحالة هو المعلومة الوحيدة التي ينشئها النظام إلزامياً. يمكنك استكمال بقية البيانات لاحقاً."
      />
      <Notice error={messages.error} />

      {duplicateCases?.length ? (
        <Card className="mb-6 border-[#e0b66d] bg-[#fff9ec] p-5">
          <div className="flex items-start gap-3">
            <AlertTriangle size={22} className="mt-0.5 shrink-0 text-[#8a611d]" aria-hidden />
            <div className="min-w-0">
              <h2 className="font-black text-[#684710]">قد تكون هذه الحالة مضافة مسبقاً.</h2>
              <p className="mt-1 text-sm leading-7 text-[#765a2a]">
                راجع الحالات المطابقة قبل الإضافة. يمكنك فتح الملف الموجود أو إعادة إدخال البيانات ثم اختيار الإضافة على أي حال.
              </p>
            </div>
          </div>
          <div className="mt-4 grid gap-3">
            {duplicateCases.map((item) => (
              <div key={item.id} className="flex flex-wrap items-center justify-between gap-3 rounded-md border bg-white p-4 text-sm">
                <div>
                  <p className="font-black">
                    <span dir="ltr">{item.case_number}</span> - {item.full_name ?? MISSING_VALUE}
                  </p>
                  <p className="mt-1 text-xs leading-6 text-[var(--ink-soft)]">
                    الميلاد: {formatDate(item.date_of_birth)}، ولي الأمر: {item.guardian_name ?? MISSING_VALUE}، الهاتف: {item.guardian_phone ?? MISSING_VALUE}
                  </p>
                </div>
                <Link href={`/admin/orphans/${item.id}`} className="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-xs font-bold text-[var(--primary)]">
                  فتح الحالة <ArrowLeft size={15} aria-hidden />
                </Link>
              </div>
            ))}
          </div>
        </Card>
      ) : null}

      <Card className="p-5 sm:p-6">
        <form action={createOrphanAction} encType="multipart/form-data" className="grid gap-7">
          <section>
            <h2 className="mb-4 text-base font-black">بيانات الحالة</h2>
            <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
              <Field label="رقم الحالة">
                <Input value="يولد تلقائياً بعد الحفظ" readOnly disabled className="bg-[var(--surface-muted)]" />
              </Field>
              <Field label="الاسم الكامل"><Input name="fullName" /></Field>
              <Field label="تاريخ الميلاد (يوم/شهر/سنة)"><Input name="dateOfBirth" type="date" /></Field>
              <Field label="النوع">
                <select name="gender" defaultValue="" className="h-11 w-full rounded-md border bg-white px-3 text-sm">
                  <option value="">غير محدد</option>
                  <option value="male">ذكر</option>
                  <option value="female">أنثى</option>
                </select>
              </Field>
              <Field label="الاحتياج الشهري (ج.س)">
                <Input name="monthlyNeed" type="number" min={1000} />
              </Field>
            </div>
          </section>

          <section>
            <h2 className="mb-4 text-base font-black">الأم أو ولي الأمر</h2>
            <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
              <Field label="الاسم الكامل"><Input name="guardianName" /></Field>
              <Field label="صلة المسؤول باليتيم"><Input name="guardianRelationship" /></Field>
              <Field label="رقم التواصل"><Input name="guardianPhone" type="tel" dir="ltr" placeholder="+249912345678" /></Field>
            </div>
            <div className="mt-5"><Field label="العنوان"><Input name="address" /></Field></div>
          </section>

          <section>
            <h2 className="mb-4 text-base font-black">بيانات الحساب البنكي</h2>
            <div className="grid gap-5 sm:grid-cols-3">
              <Field label="اسم البنك"><Input name="bankName" /></Field>
              <Field label="اسم صاحب الحساب"><Input name="bankAccountName" /></Field>
              <Field label="رقم الحساب الكامل"><Input name="bankAccountNumber" dir="ltr" /></Field>
            </div>
          </section>

          <section>
            <h2 className="mb-4 text-base font-black">الملاحظات</h2>
            <div className="grid gap-5 lg:grid-cols-2">
              <Field label="ملاحظات تظهر للمتبرع"><Textarea name="sponsorNotes" /></Field>
              <Field label="ملاحظات داخلية للإدارة"><Textarea name="privateNotes" /></Field>
            </div>
          </section>

          <section>
            <h2 className="mb-1 text-base font-black">الوثائق الاختيارية</h2>
            <p className="mb-4 text-sm text-[var(--ink-soft)]">يمكن رفع أي وثيقة متاحة الآن أو إضافتها لاحقاً من ملف الحالة.</p>
            <div className="grid gap-5 lg:grid-cols-3">
              <ImageUploadField name="orphanNationalId" label="صورة الرقم الوطني لليتيم" required={false} />
              <ImageUploadField name="fatherDeathCertificate" label="صورة شهادة وفاة الأب" required={false} />
              <ImageUploadField name="guardianNationalId" label="صورة الرقم الوطني للأم أو ولي الأمر" required={false} />
            </div>
          </section>

          <div className="flex flex-wrap gap-3">
            <SubmitButton pendingText="جارٍ إضافة الحالة..." className="w-full sm:w-auto sm:justify-self-start">
              حفظ الحالة
            </SubmitButton>
            {duplicateCases?.length ? (
              <SubmitButton
                name="duplicateOverride"
                value="true"
                pendingText="جارٍ إضافة الحالة..."
                variant="secondary"
              >
                إضافة الحالة على أي حال
              </SubmitButton>
            ) : null}
          </div>
        </form>
      </Card>
    </>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return <div><Label>{label}</Label>{children}</div>;
}
