import React, { useState, useMemo } from "react";

export default function SmartMembershipAssistant() {
const [form, setForm] = useState({
registrationType: "regular",
mainMember: "",
dependentStatus: "none",
under16: 0,
over16: 0,
});

const [birthDate, setBirthDate] = useState("");
const [ageResult, setAgeResult] = useState("");

const update = (field, value) => {
setForm((prev) => ({ ...prev, [field]: value }));
};

// ===== Age Validator Logic =====
const calculateAge = (date) => {
if (!date) return "";
const today = new Date();
const birth = new Date(date);

let age = today.getFullYear() - birth.getFullYear();  
const m = today.getMonth() - birth.getMonth();  

if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {  
  age--;  
}  

if (age < 16) {  
  return `العمر ${age} سنة — يحتاج شهادة ميلاد`;  
} else if (age >= 16 && age < 21) {  
  return `العمر ${age} سنة — يحتاج بطاقة رقم قومي`;  
} else if (age >= 21 && age <= 25) {  
  return `العمر ${age} سنة — يحتاج برنت تأميني`;  
} else {  
  return `العمر ${age} سنة — غير مسموح بالإضافة`;  
}  

};

const documents = useMemo(() => {
const list = [];
const notices = [];
const declarations = [];

if (!form.mainMember) return { list, notices, declarations };  

if (form.mainMember === "single") {  
  list.push("أصل بطاقة رقم قومي سارية فقط");  
  list.push("أصل المؤهل الدراسي");  
} else {  
  list.push("أصل بطاقة رقم قومي سارية (للزوج والزوجة) أو أصل جواز سفر ساري");  
  list.push("أصل المؤهل الدراسي");  
  list.push("أصل قسيمة الزواج المميكنة");  
  list.push("أصل شهادات ميلاد مميكنة للأبناء");  

  if (form.dependentStatus === "notIncluded") {  
    declarations.push(  
      "يقوم العضو الرئيسي بالتوقيع على إقرار رسمي بعدم ضم الزوج / الزوجة إلى ملف العضوية."  
    );  
  }  

  if (form.dependentStatus === "abroad") {  
    declarations.push(  
      "يقوم العضو الرئيسي بالتوقيع على إقرار يفيد بعدم ضم العضو التابع لوجوده خارج الدولة."  
    );  
  }  
}  

if (form.mainMember !== "single") {  
  if (form.under16 > 0) {  
    list.push("أصل شهادة ميلاد مميكنة أو أصل جواز سفر ساري (أقل من 16 سنة)");  
  }  

  if (form.over16 > 0) {  
    list.push("أصل بطاقة رقم قومي سارية أو أصل جواز سفر ساري (16 سنة فأكثر)");  
    declarations.push(  
      "يقوم العضو الرئيسي بالتوقيع على إقرار يفيد بصحة بيانات وسن العضو التابع."  
    );  

    notices.push("لا يُعتد بالكارنيه بدءًا من 1/7 من كل عام.");  
    notices.push("لا يتم إضافة الابن إذا كانت وظيفته مثبتة بالبطاقة.");  
  }  
}  

if (form.registrationType === "governorate") {  
  list.push("أصل إيصال مرافق حديث");  
  notices.push("(حديث – عنوان واضح – اسم – استهلاك فعلي)");  
  notices.push("معدل الاستهلاك:");  
  notices.push("• أكثر من 5 متر مكعب (مياه / غاز)");  
  notices.push("• أكثر من 5 كيلووات كهرباء");  
  notices.push("• أو شحن كارت بحد أدنى 50 جنيه");  
}  

return { list, notices, declarations };  

}, [form]);

return (
<div dir="rtl" className="min-h-screen bg-gray-50 p-8 font-['Cairo']">

  {/* Header */}  
  <div className="flex items-center justify-between border-b-2 border-yellow-500 pb-4 mb-8">  
    <h1 className="text-2xl font-bold">Smart Membership Assistant</h1>  
    <img src="/logo.png" alt="Club Logo" className="h-16 object-contain" />  
  </div>  

  <div className="grid grid-cols-3 gap-8">  

    {/* Controls */}  
    <div className="col-span-1 bg-white p-6 rounded-xl shadow-sm border space-y-6">  

      <div>  
        <label className="font-semibold block mb-2">نوع التسجيل</label>  
        <select  
          className="w-full border p-3 rounded-lg"  
          onChange={(e) => update("registrationType", e.target.value)}  
        >  
          <option value="regular">عادي</option>  
          <option value="governorate">محافظات</option>  
        </select>  
      </div>  

      <div>  
        <label className="font-semibold block mb-2">العضو الرئيسي</label>  
        <select  
          className="w-full border p-3 rounded-lg"  
          onChange={(e) => update("mainMember", e.target.value)}  
        >  
          <option value="">اختر</option>  
          <option value="husband">الزوج</option>  
          <option value="wife">الزوجة</option>  
          <option value="single">أعزب</option>  
        </select>  
      </div>  

      {form.mainMember && form.mainMember !== "single" && (  
        <>  
          <div>  
            <label className="font-semibold block mb-2">ضم الطرف الآخر</label>  
            <select  
              className="w-full border p-3 rounded-lg"  
              onChange={(e) => update("dependentStatus", e.target.value)}  
            >  
              <option value="none">ضم</option>  
              <option value="notIncluded">عدم ضم</option>  
              <option value="abroad">خارج البلاد</option>  
            </select>  
          </div>  

          <div>  
            <label className="font-semibold block mb-2">عدد الأبناء أقل من 16</label>  
            <input  
              type="number"  
              min="0"  
              className="w-full border p-3 rounded-lg"  
              onChange={(e) => update("under16", Number(e.target.value))}  
            />  
          </div>  

          <div>  
            <label className="font-semibold block mb-2">عدد الأبناء 16 فأكثر</label>  
            <input  
              type="number"  
              min="0"  
              className="w-full border p-3 rounded-lg"  
              onChange={(e) => update("over16", Number(e.target.value))}  
            />  
          </div>  
        </>  
      )}  
    </div>  

    {/* Output */}  
    <div className="col-span-1 bg-white p-6 rounded-xl shadow-sm border space-y-6">  
      <h2 className="font-bold text-lg">المستندات المطلوبة</h2>  
      <ul className="space-y-2">  
        {documents.list.map((doc, i) => (  
          <li key={i}>• {doc}</li>  
        ))}  
      </ul>  

      {documents.declarations.length > 0 && (  
        <>  
          <h2 className="font-bold text-lg mt-4">إقرارات وتعهدات</h2>  
          <ul className="space-y-2">  
            {documents.declarations.map((d, i) => (  
              <li key={i}>• {d}</li>  
            ))}  
          </ul>  
        </>  
      )}  

      {documents.notices.length > 0 && (  
        <div className="bg-yellow-50 border border-yellow-300 p-4 rounded-lg text-sm">  
          <h3 className="font-bold mb-2">تنبيهات</h3>  
          {documents.notices.map((n, i) => (  
            <div key={i}>{n}</div>  
          ))}  
        </div>  
      )}  
    </div>  

    {/* Age Validator */}  
    <div className="col-span-1 bg-white p-6 rounded-xl shadow-sm border">  
      <h2 className="font-bold text-lg mb-4">حاسبة السن القانوني</h2>  

      <input  
        type="date"  
        className="w-full border p-3 rounded-lg"  
        value={birthDate}  
        onChange={(e) => {  
          setBirthDate(e.target.value);  
          setAgeResult(calculateAge(e.target.value));  
        }}  
      />  

      {ageResult && (  
        <div className="mt-4 bg-gray-100 p-4 rounded-lg text-sm font-medium">  
          {ageResult}  
        </div>  
      )}  
    </div>  

  </div>  
</div>  

);
}