'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { apiRequest } from '../../../lib/api';
import { requireAuth } from '../../../lib/authRedirect';
import { Button } from '../../../components/Button';
import { Badge } from '../../../components/Badge';
import { PageHeader } from '../../../components/PageHeader';
import { ErrorBlock, LoadingBlock } from '../../../components/StateBlock';

export default function KycPage() {
  const router = useRouter();
  const pathname = usePathname();
  const [status, setStatus] = useState<any>(null);
  const [form, setForm] = useState({
    fullName: '',
    panNumber: '',
    aadhaarNumber: '',
    dateOfBirth: '',
    state: 'Maharashtra',
  });
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  const load = async () => {
    if (requireAuth(router, pathname || '/kyc')) return;
    setLoading(true);
    try {
      const res = await apiRequest('/kyc/my-status');
      setStatus(res.data);
      if (res.data?.fullName) {
        setForm((f) => ({
          ...f,
          fullName: res.data.fullName || '',
          panNumber: res.data.panNumber || '',
          state: res.data.state || f.state,
        }));
      }
      setError('');
    } catch (e: any) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setError('');
    try {
      await apiRequest('/kyc/submit', {
        method: 'POST',
        body: JSON.stringify({
          ...form,
          panNumber: form.panNumber.toUpperCase(),
          dateOfBirth: new Date(form.dateOfBirth).toISOString(),
          documents: [
            {
              documentType: 'PAN',
              fileUrl: 'https://example.com/kyc/pan-placeholder.pdf',
              originalName: 'pan.pdf',
              mimeType: 'application/pdf',
              fileSize: 12000,
            },
          ],
        }),
      });
      await load();
    } catch (err: any) {
      setError(err.message);
    } finally {
      setBusy(false);
    }
  };

  if (loading) return <LoadingBlock />;

  return (
    <div className="mx-auto max-w-lg space-y-3">
      <PageHeader
        title="KYC verification"
        subtitle="Required before withdrawing coins"
        backHref="/profile"
        backLabel="Account"
        action={
          <Link href="/wallet" className="text-sm font-bold text-d11-red hover:underline">
            Wallet
          </Link>
        }
      />
      {status?.status && status.status !== 'NONE' && (
        <div className="d11-card px-4 py-3 text-sm text-d11-ink">
          Status: <Badge variant="cyan">{status.status}</Badge>
          {status.rejectionReason && (
            <p className="mt-2 text-xs text-red-600">{status.rejectionReason}</p>
          )}
        </div>
      )}
      {error && <ErrorBlock message={error} />}
      <form onSubmit={submit} className="d11-card space-y-3 p-4">
        {(
          [
            ['fullName', 'Full name', 'text'],
            ['panNumber', 'PAN', 'text'],
            ['aadhaarNumber', 'Aadhaar (optional)', 'text'],
            ['dateOfBirth', 'Date of birth', 'date'],
            ['state', 'State', 'text'],
          ] as const
        ).map(([key, label, type]) => (
          <label key={key} className="block text-[11px] font-bold uppercase text-d11-muted">
            {label}
            <input
              required={key !== 'aadhaarNumber'}
              type={type}
              value={(form as any)[key]}
              onChange={(e) => setForm({ ...form, [key]: e.target.value })}
              className="d11-input mt-1.5"
            />
          </label>
        ))}
        <p className="text-[11px] text-d11-muted">
          Submit your details for review. Document upload will be enabled when file storage is wired.
        </p>
        <Button type="submit" loading={busy} className="w-full">
          Submit KYC
        </Button>
      </form>
    </div>
  );
}