'use client';

import React, { useEffect, useState } from 'react';
import { FileCheck2, Check, X, AlertTriangle, Eye } from 'lucide-react';
import { apiRequest } from '../../../lib/api';
import { Badge } from '../../../components/Badge';
import { Button } from '../../../components/Button';
import { Modal } from '../../../components/Modal';

export default function KycAdminPage() {
  const [kycList, setKycList] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedKyc, setSelectedKyc] = useState<any>(null);
  const [isReviewOpen, setIsReviewOpen] = useState(false);
  const [reviewAction, setReviewAction] = useState<'APPROVED' | 'REJECTED' | 'CORRECTION_REQUIRED'>('APPROVED');
  const [rejectionReason, setRejectionReason] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const loadKyc = async () => {
    try {
      setLoading(true);
      const res = await apiRequest('/kyc/admin/list');
      setKycList(res.data || []);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadKyc();
  }, []);

  const handleReviewSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    try {
      await apiRequest(`/kyc/admin/${selectedKyc._id}/review`, {
        method: 'PATCH',
        body: JSON.stringify({
          status: reviewAction,
          rejectionReason: reviewAction !== 'APPROVED' ? rejectionReason : undefined,
        }),
      });
      setIsReviewOpen(false);
      setSelectedKyc(null);
      setRejectionReason('');
      loadKyc();
    } catch (err: any) {
      alert(err.message || 'Failed to update KYC status');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight text-white">KYC Verification Queue</h1>
        <p className="text-xs text-zinc-400 mt-1">Review government identity proofs, PAN verification, and compliance status</p>
      </div>

      <div className="bg-zinc-900/80 border border-zinc-800 rounded-2xl overflow-hidden">
        {loading ? (
          <div className="p-8 text-center text-xs text-zinc-400">Loading KYC submissions...</div>
        ) : kycList.length === 0 ? (
          <div className="p-8 text-center text-xs text-zinc-400">No KYC submissions found in queue.</div>
        ) : (
          <table className="w-full text-left text-sm">
            <thead className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider bg-zinc-950/40 border-b border-zinc-800">
              <tr>
                <th className="px-5 py-3">Applicant</th>
                <th className="px-5 py-3">PAN</th>
                <th className="px-5 py-3">State</th>
                <th className="px-5 py-3">Documents</th>
                <th className="px-5 py-3">Status</th>
                <th className="px-5 py-3 text-right">Action</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-zinc-800/60 text-xs">
              {kycList.map((k) => (
                <tr key={k._id} className="hover:bg-zinc-800/30 transition-colors">
                  <td className="px-5 py-3 font-medium text-white">
                    {k.fullName}
                    <div className="text-[11px] text-zinc-400 font-mono">{k.userId?.phone}</div>
                  </td>
                  <td className="px-5 py-3 font-mono text-emerald-400">{k.panNumber}</td>
                  <td className="px-5 py-3 text-zinc-300">{k.state}</td>
                  <td className="px-5 py-3 text-zinc-400 font-mono">{k.documents?.length || 0} file(s)</td>
                  <td className="px-5 py-3">
                    <Badge
                      variant={
                        k.status === 'APPROVED'
                          ? 'emerald'
                          : k.status === 'REJECTED'
                          ? 'rose'
                          : 'amber'
                      }
                    >
                      {k.status}
                    </Badge>
                  </td>
                  <td className="px-5 py-3 text-right">
                    <button
                      onClick={() => {
                        setSelectedKyc(k);
                        setIsReviewOpen(true);
                      }}
                      className="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-200 transition-colors font-medium"
                    >
                      Review
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* Review KYC Modal */}
      <Modal
        isOpen={isReviewOpen}
        onClose={() => setIsReviewOpen(false)}
        title={`Review KYC: ${selectedKyc?.fullName}`}
      >
        <form onSubmit={handleReviewSubmit} className="space-y-4 text-xs">
          <div className="grid grid-cols-2 gap-3 p-3 bg-zinc-950/60 rounded-xl border border-zinc-800">
            <div>
              <span className="text-zinc-400 text-[11px]">PAN Number:</span>
              <div className="font-mono font-bold text-white text-sm">{selectedKyc?.panNumber}</div>
            </div>
            <div>
              <span className="text-zinc-400 text-[11px]">State / Region:</span>
              <div className="font-medium text-white text-sm">{selectedKyc?.state}</div>
            </div>
            <div>
              <span className="text-zinc-400 text-[11px]">Date of Birth:</span>
              <div className="font-mono text-zinc-300">
                {selectedKyc?.dateOfBirth && new Date(selectedKyc.dateOfBirth).toLocaleDateString()}
              </div>
            </div>
            <div>
              <span className="text-zinc-400 text-[11px]">Current Status:</span>
              <div>
                <Badge variant="amber">{selectedKyc?.status}</Badge>
              </div>
            </div>
          </div>

          <div>
            <label className="block text-zinc-300 uppercase font-semibold mb-2">Review Decision</label>
            <div className="grid grid-cols-3 gap-2">
              <button
                type="button"
                onClick={() => setReviewAction('APPROVED')}
                className={`py-2 px-3 rounded-lg border text-xs font-semibold flex items-center justify-center gap-1.5 transition-colors ${
                  reviewAction === 'APPROVED'
                    ? 'bg-emerald-600 text-white border-emerald-500'
                    : 'bg-zinc-950 text-zinc-400 border-zinc-800 hover:text-white'
                }`}
              >
                <Check className="w-3.5 h-3.5" />
                <span>Approve</span>
              </button>
              <button
                type="button"
                onClick={() => setReviewAction('REJECTED')}
                className={`py-2 px-3 rounded-lg border text-xs font-semibold flex items-center justify-center gap-1.5 transition-colors ${
                  reviewAction === 'REJECTED'
                    ? 'bg-rose-600 text-white border-rose-500'
                    : 'bg-zinc-950 text-zinc-400 border-zinc-800 hover:text-white'
                }`}
              >
                <X className="w-3.5 h-3.5" />
                <span>Reject</span>
              </button>
              <button
                type="button"
                onClick={() => setReviewAction('CORRECTION_REQUIRED')}
                className={`py-2 px-3 rounded-lg border text-xs font-semibold flex items-center justify-center gap-1.5 transition-colors ${
                  reviewAction === 'CORRECTION_REQUIRED'
                    ? 'bg-amber-600 text-white border-amber-500'
                    : 'bg-zinc-950 text-zinc-400 border-zinc-800 hover:text-white'
                }`}
              >
                <AlertTriangle className="w-3.5 h-3.5" />
                <span>Correction</span>
              </button>
            </div>
          </div>

          {reviewAction !== 'APPROVED' && (
            <div>
              <label className="block text-zinc-300 uppercase font-semibold mb-1">
                Reason / Note for User
              </label>
              <textarea
                required
                rows={3}
                placeholder="e.g. Document image is blurred or PAN name does not match bank name"
                value={rejectionReason}
                onChange={(e) => setRejectionReason(e.target.value)}
                className="w-full px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-white"
              />
            </div>
          )}

          <div className="pt-2 flex justify-end gap-2">
            <Button type="button" variant="secondary" onClick={() => setIsReviewOpen(false)}>
              Cancel
            </Button>
            <Button
              type="submit"
              variant={reviewAction === 'APPROVED' ? 'primary' : reviewAction === 'REJECTED' ? 'danger' : 'amber'}
              loading={submitting}
            >
              Submit Decision
            </Button>
          </div>
        </form>
      </Modal>
    </div>
  );
}