"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { Store, Upload } from "lucide-react";
import useAuth from "@/hooks/useAuth";
import { privateSellerApi } from "@/lib/api";
import { useSnackbar } from "@/context/SnackbarContext";
import { normalizePhonePk, validatePhone } from "@/lib/validators";

export default function BecomeSellerApplication() {
  const { user, refresh } = useAuth();
  const { showSuccess, showError } = useSnackbar();
  const [sellerStatus, setSellerStatus] = useState(null);
  const [loading, setLoading] = useState(true);
  const [showSellerForm, setShowSellerForm] = useState(false);
  const [sellerSubmitting, setSellerSubmitting] = useState(false);
  const [sellerForm, setSellerForm] = useState({
    phone: "",
    cnic: "",
    address: "",
    city: "",
    bank_name: "",
    bank_account_number: "",
    bank_account_holder: "",
  });
  const [idFront, setIdFront] = useState(null);
  const [idBack, setIdBack] = useState(null);

  useEffect(() => {
    if (!user) return;
    setSellerForm((p) => ({ ...p, phone: user.phone || p.phone }));
  }, [user]);

  useEffect(() => {
    privateSellerApi
      .status()
      .then((res) => {
        setSellerStatus(res);
        if (res?.kyc_status === "rejected") {
          setShowSellerForm(false);
        }
      })
      .catch(() => setSellerStatus(null))
      .finally(() => setLoading(false));
  }, []);

  const handleSellerApply = async (e) => {
    e.preventDefault();
    const phoneErr = validatePhone(sellerForm.phone);
    if (phoneErr) {
      showError?.(phoneErr);
      return;
    }
    if (!sellerForm.cnic?.trim()) {
      showError?.("CNIC is required.");
      return;
    }
    if (!sellerForm.address?.trim() || !sellerForm.city?.trim()) {
      showError?.("Address and city are required.");
      return;
    }
    const phone = normalizePhonePk(sellerForm.phone);
    setSellerSubmitting(true);
    try {
      const res = await privateSellerApi.apply({
        phone,
        cnic: sellerForm.cnic.trim(),
        address: `${sellerForm.address.trim()}, ${sellerForm.city.trim()}`,
        city: sellerForm.city.trim(),
        bank_name: sellerForm.bank_name?.trim() || undefined,
        bank_account_number: sellerForm.bank_account_number?.trim() || undefined,
        bank_account_holder: sellerForm.bank_account_holder?.trim() || undefined,
        id_front: idFront || undefined,
        id_back: idBack || undefined,
      });
      setSellerStatus(res);
      setShowSellerForm(false);
      await refresh();
      showSuccess?.(res?.message || "KYC submitted. Waiting for admin approval.");
    } catch (err) {
      showError?.(err?.data?.message || err?.message || "Failed to submit application.");
    } finally {
      setSellerSubmitting(false);
    }
  };

  if (loading) {
    return <div className="h-40 bg-gray-100 rounded-2xl animate-pulse" />;
  }

  if (user?.is_private_seller) {
    return (
      <div className="bg-emerald-50 border border-emerald-200 rounded-2xl p-6 flex items-start gap-3">
        <Store className="w-6 h-6 text-emerald-600 shrink-0 mt-0.5" />
        <div>
          <p className="font-semibold text-emerald-800">You are a Private Seller</p>
          <p className="text-sm text-emerald-700 mt-1">
            Manage listings from My Listings. Multi-quantity selling and earnings are unlocked.
          </p>
          <Link href="/customer/listings" className="inline-block mt-3 text-sm font-semibold text-[#1790d7] hover:underline">
            Go to My Listings →
          </Link>
        </div>
      </div>
    );
  }

  const kycStatus = sellerStatus?.kyc_status;
  const pending = kycStatus === "pending" || kycStatus === "under_review";
  const rejected = kycStatus === "rejected";

  return (
    <div className="bg-gradient-to-br from-[#1790d7]/10 via-white to-[#4db3e8]/10 rounded-2xl p-6 shadow-sm border border-[#1790d7]/20">
      <h2 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
        <Store className="w-5 h-5 text-[#1790d7]" />
        Become a Private Seller
      </h2>

      {pending ? (
        <div className="p-4 bg-amber-50 border border-amber-200 rounded-xl">
          <p className="font-semibold text-amber-800">Application under review</p>
          <p className="text-sm text-amber-700 mt-1">
            We&apos;re reviewing your private seller application. You&apos;ll be notified once approved.
          </p>
        </div>
      ) : rejected ? (
        <div className="space-y-3">
          <div className="p-4 bg-red-50 border border-red-200 rounded-xl">
            <p className="font-semibold text-red-800">Application rejected</p>
            {(sellerStatus?.kyc?.rejection_reason || sellerStatus?.rejection_reason) && (
              <p className="text-sm text-red-700 mt-1">
                {sellerStatus.kyc?.rejection_reason || sellerStatus.rejection_reason}
              </p>
            )}
          </div>
          {!showSellerForm && (
            <button
              type="button"
              onClick={() => setShowSellerForm(true)}
              className="px-5 py-2.5 bg-[#1790d7] hover:bg-[#1277b8] text-white font-semibold rounded-xl"
            >
              Re-apply
            </button>
          )}
        </div>
      ) : !showSellerForm ? (
        <div>
          <p className="text-sm text-gray-600 mb-4">
            Sell multiple quantities, manage listing orders, and withdraw earnings. Complete a quick KYC to get started.
          </p>
          <button
            type="button"
            onClick={() => setShowSellerForm(true)}
            className="px-5 py-2.5 bg-[#1790d7] hover:bg-[#1277b8] text-white font-semibold rounded-xl shadow-sm"
          >
            Start application
          </button>
        </div>
      ) : null}

      {showSellerForm && !pending && (
        <form onSubmit={handleSellerApply} className="mt-4 space-y-3 p-4 bg-white rounded-xl border border-gray-200">
          <div className="grid sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Phone *</label>
              <input
                type="text"
                value={sellerForm.phone}
                onChange={(e) => setSellerForm((p) => ({ ...p, phone: e.target.value }))}
                placeholder="03XXXXXXXXX"
                required
                className="w-full px-4 py-2.5 border border-gray-200 rounded-xl"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">CNIC *</label>
              <input
                type="text"
                value={sellerForm.cnic}
                onChange={(e) => setSellerForm((p) => ({ ...p, cnic: e.target.value }))}
                placeholder="XXXXX-XXXXXXX-X"
                required
                className="w-full px-4 py-2.5 border border-gray-200 rounded-xl"
              />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Address *</label>
            <input
              type="text"
              value={sellerForm.address}
              onChange={(e) => setSellerForm((p) => ({ ...p, address: e.target.value }))}
              required
              className="w-full px-4 py-2.5 border border-gray-200 rounded-xl"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">City *</label>
            <input
              type="text"
              value={sellerForm.city}
              onChange={(e) => setSellerForm((p) => ({ ...p, city: e.target.value }))}
              required
              className="w-full px-4 py-2.5 border border-gray-200 rounded-xl"
            />
          </div>
          <div className="grid sm:grid-cols-3 gap-3">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Bank name</label>
              <input
                type="text"
                value={sellerForm.bank_name}
                onChange={(e) => setSellerForm((p) => ({ ...p, bank_name: e.target.value }))}
                className="w-full px-4 py-2.5 border border-gray-200 rounded-xl"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Account number</label>
              <input
                type="text"
                value={sellerForm.bank_account_number}
                onChange={(e) => setSellerForm((p) => ({ ...p, bank_account_number: e.target.value }))}
                className="w-full px-4 py-2.5 border border-gray-200 rounded-xl"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Account holder</label>
              <input
                type="text"
                value={sellerForm.bank_account_holder}
                onChange={(e) => setSellerForm((p) => ({ ...p, bank_account_holder: e.target.value }))}
                className="w-full px-4 py-2.5 border border-gray-200 rounded-xl"
              />
            </div>
          </div>
          <div className="grid sm:grid-cols-2 gap-3">
            <label className="flex flex-col gap-1 p-3 border border-dashed border-gray-300 rounded-xl cursor-pointer hover:border-[#1790d7]">
              <span className="text-sm font-medium text-gray-700 flex items-center gap-2">
                <Upload className="w-4 h-4" /> ID front (optional)
              </span>
              <span className="text-xs text-gray-500">{idFront?.name || "JPEG, PNG or PDF"}</span>
              <input
                type="file"
                accept="image/*,.pdf"
                className="hidden"
                onChange={(e) => setIdFront(e.target.files?.[0] || null)}
              />
            </label>
            <label className="flex flex-col gap-1 p-3 border border-dashed border-gray-300 rounded-xl cursor-pointer hover:border-[#1790d7]">
              <span className="text-sm font-medium text-gray-700 flex items-center gap-2">
                <Upload className="w-4 h-4" /> ID back (optional)
              </span>
              <span className="text-xs text-gray-500">{idBack?.name || "JPEG, PNG or PDF"}</span>
              <input
                type="file"
                accept="image/*,.pdf"
                className="hidden"
                onChange={(e) => setIdBack(e.target.files?.[0] || null)}
              />
            </label>
          </div>
          <div className="flex flex-wrap gap-2">
            <button
              type="submit"
              disabled={sellerSubmitting}
              className="px-5 py-2.5 bg-[#1790d7] text-white font-semibold rounded-xl disabled:opacity-60"
            >
              {sellerSubmitting ? "Submitting…" : "Submit application"}
            </button>
            <button
              type="button"
              onClick={() => setShowSellerForm(false)}
              className="px-4 py-2.5 border border-gray-200 rounded-xl"
            >
              Cancel
            </button>
          </div>
        </form>
      )}
    </div>
  );
}