"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import Field from "@/components/ui/Field";
import PropertyListingFormCard from "@/components/listings/PropertyListingFormCard";
import ProjectListingFormCard from "@/components/listings/ProjectListingFormCard";
import UploadImage from "@/components/rental-contracts/UploadImage";
import { buildingCodeOptions, propertyServices, propertyTypes } from "@/data/listingForm";

export default function AdvertisingLicensePage() {
  const [step, setStep] = useState<1 | 2 | 3 | 4>(1);
  const [listingKind, setListingKind] = useState<"unit" | "projects">("unit");
  const [selectedServices, setSelectedServices] = useState<string[]>([]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget as HTMLFormElement);
    const data = Object.fromEntries(formData.entries());
    console.log("Advertising license form submitted:", data);
  };

  const onNext = () => {
    if (step === 1) {
      setStep(2);
      return;
    }
    if (step === 2) {
      setStep(3);
      return;
    }
    if (step === 3) {
      setStep(4);
      return;
    }
  };

  const onBack = () => {
    if (step === 4) {
      setStep(3);
      return;
    }
    if (step === 3) {
      setStep(2);
      return;
    }
    if (step === 2) {
      setStep(1);
      return;
    }
  };

  return (
    <div className="w-full md:w-3/4 lg:w-2/3 mx-auto mt-8 md:mt-14 px-4" dir="rtl">
      <div className="mb-6 text-center">
        <h1 className="text-2xl md:text-4xl font-semibold text-[#1D293D]">ترخيص اعلاني</h1>
      </div>

      <form onSubmit={handleSubmit} className="flex flex-col gap-6 bg-[#F1F5F9] p-2 md:p-6 rounded-lg">
        <input type="hidden" name="licenseSource" value="us" />
        <input type="hidden" name="listingKind" value={listingKind} />

        {step === 1 && (
          <div className="bg-white border border-[#CAD5E2] p-4 rounded-xl" dir="rtl">
            <div className="bg-[#E2E8F0] p-4 rounded-md -mx-4 -mt-4 mb-4">
              <h4 className="text-lg font-semibold text-[#1D293D]">ترخيص إعلاني</h4>
            </div>

            <p className="font-medium text-[#1D293D]">(بامكانك اصدار ترخيص إعلاني من قبل منصة أمتار لتتمكن من عرض عقارك )</p>

            <div className="mt-3 text-sm text-[#45556C]">
              <div className="font-medium text-[#1D293D]">المتطلبات:-</div>
              <div className="mt-2 space-y-1">
                <div>1-تعبئة نموذج العقار</div>
                <div>2- توفير بيانات المالك/ الوكيل</div>
                <div>3- توفير وثيقة التملك للعقار</div>
                <div>4- دفع الترخيص والتسويق</div>
              </div>
            </div>

            <div className="mt-4 text-sm text-[#45556C] space-y-1">
              <div>تكلفة ترخيص الاعلان: 300 ريال لمدة 3 شهور</div>
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="w-full" dir="rtl">
            <div className="bg-white py-4 px-2 rounded-md">
              <Field
                name="propertyType"
                label="نوع العقار"
                required
                type="select"
                placeholder="اختر نوع العقار"
                options={propertyTypes}
                value={listingKind}
                onChange={(e) => setListingKind(e.target.value as "unit" | "projects")}
              />
            </div>

            <div className="w-full mt-4" dir="rtl">
              {listingKind === "projects" ? (
                <ProjectListingFormCard licenseSource="us" section="details" />
              ) : (
                <PropertyListingFormCard licenseSource="us" section="details" />
              )}
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="bg-white border border-[#CAD5E2] p-4 rounded-xl overflow-hidden" dir="rtl">
            <div className="bg-[#E2E8F0] p-4 -mx-4 -mt-4 mb-4">
              <h4 className="text-lg font-semibold text-[#1D293D]">بيانات الصك والمالك</h4>
            </div>

            <div className="pt-2 space-y-4">
              <UploadImage title="صورة من الصك" name="deedImage" />
              <UploadImage title="صورة الهوية من المالك/الوكيل" name="ownerIdImage" />

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Field name="ownerName" label="اسم المالك/الوكيل" type="text" placeholder="القيمة هنا" required />
                <Field name="ownerIdNumber" label="رقم الهوية" type="number" placeholder="القيمة هنا" required />
                <Field
                  className="md:col-span-2"
                  name="ownerPhone"
                  label="رقم الجوال"
                  type="tel"
                  placeholder="05xxxxxxxx"
                  required
                />
              </div>

              <div>
                <label className="px-2 block text-sm text-gray-700 mb-1">خدمات العقار</label>
                <Field
                  name="propertyServices"
                  type="multi-select"
                  placeholder="اختر الخدمات"
                  options={propertyServices}
                  multiValue={selectedServices}
                  onMultiChange={setSelectedServices}
                />
              </div>

              <Field
                name="buildingCode"
                label="مطابقة كود البناء السعودي"
                type="select"
                placeholder="القيمة هنا"
                options={buildingCodeOptions}
              />

              <Field
                className="mt-8"
                name="warrantiesAuthorityText"
                label="الضمانات ومدتها (هيئة العقار)"
                type="textarea"
                placeholder="اذكر الضمانات ومدتها..."
              />

              <Field
                className="mt-8"
                name="obligations"
                label="الالتزامات على العقار (أن وجد)"
                type="textarea"
                placeholder="اذكر الالتزامات..."
              />

              <Field
                name="facade"
                label="الواجهة"
                type="select"
                placeholder="القيمة هنا"
                options={[
                  { label: "شرقي", value: "east" },
                  { label: "غربي", value: "west" },
                  { label: "شمالي", value: "north" },
                  { label: "جنوبي", value: "south" },
                ]}
              />

              <Field name="streetNumber" label="الشارع" type="number" placeholder="القيمة هنا" />
            </div>
          </div>
        )}

        {step === 4 && (
          <div className="bg-white border border-[#CAD5E2] p-4 rounded-xl" dir="rtl">
            <div className="bg-[#E2E8F0] p-4 rounded-md -mx-4 -mt-4 mb-4">
              <h4 className="text-lg font-semibold text-[#1D293D]">الدفع</h4>
            </div>

            <p className="text-[#45556C]">اضغط على الزر التالي للانتقال إلى الدفع.</p>

            <div className="mt-4">
              <a href="/user-panel/plans" className="inline-block w-full">
                <Button type="button" className="w-full font-normal rounded-full bg-[#052531] hover:bg-[#052531]/90">
                  رابط الدفع
                </Button>
              </a>
            </div>
          </div>
        )}

        <div className="flex justify-center gap-4">
          <Button
            type="button"
            onClick={onBack}
            disabled={step === 1}
            className="min-w-[140px] font-normal rounded-full bg-[#FEF2F2] hover:bg-[#FADDDD] text-[#E7000B] disabled:opacity-50"
          >
            السابق
          </Button>

          {step === 4 ? (
            <Button type="submit" className="min-w-[140px] font-normal rounded-full bg-[#052531] hover:bg-[#052531]/90">
              حفظ
            </Button>
          ) : (
            <Button type="button" onClick={onNext} className="min-w-[140px] font-normal rounded-full bg-[#052531] hover:bg-[#052531]/90">
              التالي
            </Button>
          )}
        </div>
      </form>
    </div>
  );
}