import {
  Award,
  Bike,
  Building2,
  ClipboardList,
  CreditCard,
  GraduationCap,
  Loader2,
  Mail,
  MapPin,
  Pencil,
  Phone,
  User,
} from 'lucide-react';
import { Application } from '../../../lib/mock-data';
import { Button } from '../../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card';
import { Input } from '../../ui/input';
import { Label } from '../../ui/label';
import { Separator } from '../../ui/separator';

interface StatutoryFormState {
  accountHolderName: string;
  panNumber: string;
  gstNumber: string;
  registeredAddress: string;
  bankName: string;
  accountNumber: string;
  ifscCode: string;
}

interface ApplicantInformationCardProps {
  application: Application;
  canEditStatutory: boolean;
  isEditingStatutory: boolean;
  isSavingStatutory: boolean;
  statutoryForm: StatutoryFormState;
  onEditFirmType: () => void;
  onEditStatutory: () => void;
  onCancelEditStatutory: () => void;
  onSaveStatutory: () => void;
  onStatutoryFormChange: (nextState: StatutoryFormState) => void;
}

export function ApplicantInformationCard({
  application,
  canEditStatutory,
  isEditingStatutory,
  isSavingStatutory,
  statutoryForm,
  onEditFirmType,
  onEditStatutory,
  onCancelEditStatutory,
  onSaveStatutory,
  onStatutoryFormChange,
}: ApplicantInformationCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Applicant Information</CardTitle>
      </CardHeader>
      <CardContent className="p-4 sm:p-6 space-y-4">
        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
          <div className="flex items-start gap-3">
            <User className="w-5 h-5 text-slate-400 mt-1" />
            <div>
              <p className="text-slate-600">Full Name</p>
              <p className="text-slate-900">{application.name}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <Mail className="w-5 h-5 text-slate-400 mt-1" />
            <div>
              <p className="text-slate-600">Email</p>
              <p className="text-slate-900">{application.email}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <Phone className="w-5 h-5 text-slate-400 mt-1" />
            <div>
              <p className="text-slate-600">Phone</p>
              <p className="text-slate-900">{application.phone}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <User className="w-5 h-5 text-slate-400 mt-1" />
            <div>
              <p className="text-slate-600">Age</p>
              <p className="text-slate-900">{application.age ? `${application.age} years` : 'N/A'}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <GraduationCap className="w-5 h-5 text-slate-400 mt-1" />
            <div>
              <p className="text-slate-600">Education</p>
              <p className="text-slate-900">{application.education || 'N/A'}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <MapPin className="w-5 h-5 text-slate-400 mt-1" />
            <div>
              <p className="text-slate-600">Preferred Location</p>
              <p className="text-slate-900">{application.preferredLocation || 'N/A'}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <MapPin className="w-5 h-5 text-slate-400 mt-1" />
            <div>
              <p className="text-slate-600">Location Type</p>
              <p className="text-slate-900">{application.locationType || 'N/A'}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <Building2 className="w-5 h-5 text-slate-400 mt-1" />
            <div className="flex-1">
              <p className="text-slate-600 flex items-center justify-between group cursor-pointer" onClick={onEditFirmType}>
                Proposed Firm Type
                <Pencil className="w-3 h-3 text-slate-300 group-hover:text-amber-600 transition-colors" />
              </p>
              <p className="text-slate-900 font-black text-amber-700 tracking-tight leading-none mt-1">
                {application.constitutionType || 'Not Provided'}
              </p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <Bike className="w-5 h-5 text-slate-400 mt-1" />
            <div>
              <p className="text-slate-600">Owns Bike</p>
              <p className="text-slate-900">{application.ownRoyalEnfield === 'yes' ? 'Yes' : 'No'}</p>
            </div>
          </div>

          {application.ownRoyalEnfield === 'yes' && (
            <div className="flex items-start gap-3">
              <Bike className="w-5 h-5 text-slate-400 mt-1" />
              <div>
                <p className="text-slate-600">Bike Model</p>
                <p className="text-slate-900">{application.royalEnfieldModel || 'N/A'}</p>
              </div>
            </div>
          )}

          <div className="flex items-start gap-3">
            <User className="w-5 h-5 text-slate-400 mt-1" />
            <div>
              <p className="text-slate-600">Existing Dealer</p>
              <p className="text-slate-900">{application.existingDealer === 'yes' ? 'Yes' : 'No'}</p>
            </div>
          </div>

          {application.existingDealer === 'yes' && (
            <div className="flex items-start gap-3">
              <User className="w-5 h-5 text-slate-400 mt-1" />
              <div>
                <p className="text-slate-600">Company Name</p>
                <p className="text-slate-900">{application.companyName || 'N/A'}</p>
              </div>
            </div>
          )}

          <div className="flex items-start gap-3">
            <ClipboardList className="w-5 h-5 text-slate-400 mt-1" />
            <div>
              <p className="text-slate-600">Source</p>
              <p className="text-slate-900">{application.source || 'N/A'}</p>
            </div>
          </div>

          {application.questionnaireMarks !== undefined && (
            <div className="flex items-start gap-3">
              <Award className="w-5 h-5 text-slate-400 mt-1" />
              <div>
                <p className="text-slate-600">Questionnaire Score</p>
                <p className="text-slate-900">{application.questionnaireMarks}/100</p>
              </div>
            </div>
          )}
        </div>

        <Separator />

        <div>
          <p className="text-slate-600 mb-2">Address</p>
          <p className="text-slate-900">{application.address || 'N/A'}</p>
        </div>

        <div>
          <p className="text-slate-600 mb-2">Pincode</p>
          <p className="text-slate-900">{application.pincode || 'N/A'}</p>
        </div>

        <div>
          <p className="text-slate-600 mb-2">Description</p>
          <p className="text-slate-900">{application.description || 'N/A'}</p>
        </div>

        <div>
          <p className="text-slate-600 mb-2">Past Experience</p>
          <p className="text-slate-900">{application.pastExperience || 'N/A'}</p>
        </div>

        <div className="pt-6 border-t mt-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-sm font-black text-slate-900 uppercase tracking-widest flex items-center gap-2">
              <CreditCard className="w-4 h-4 text-amber-600" /> Statutory & Bank Information
            </h3>
            {canEditStatutory && !isEditingStatutory && (
              <Button
                variant="ghost"
                size="sm"
                onClick={onEditStatutory}
                className="h-8 text-amber-600 hover:text-amber-700 hover:bg-amber-50 gap-1.5"
              >
                <Pencil className="w-3.5 h-3.5" />
                Edit Details
              </Button>
            )}
          </div>

          {isEditingStatutory ? (
            <div className="bg-slate-50/50 p-6 rounded-xl border-2 border-amber-100 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="space-y-2">
                  <Label className="text-[10px] uppercase font-bold text-slate-500">Legal Entity Name</Label>
                  <Input
                    value={statutoryForm.accountHolderName}
                    onChange={(e) => onStatutoryFormChange({ ...statutoryForm, accountHolderName: e.target.value })}
                    placeholder="Enter Legal Entity Name"
                    className="bg-white border-slate-200"
                  />
                </div>
                <div className="space-y-2">
                  <Label className="text-[10px] uppercase font-bold text-slate-500">PAN Number</Label>
                  <Input
                    value={statutoryForm.panNumber}
                    onChange={(e) => onStatutoryFormChange({ ...statutoryForm, panNumber: e.target.value.toUpperCase() })}
                    placeholder="10-digit PAN"
                    maxLength={10}
                    className="bg-white border-slate-200 uppercase"
                  />
                </div>
                <div className="space-y-2">
                  <Label className="text-[10px] uppercase font-bold text-slate-500">GST Number</Label>
                  <Input
                    value={statutoryForm.gstNumber}
                    onChange={(e) => onStatutoryFormChange({ ...statutoryForm, gstNumber: e.target.value.toUpperCase() })}
                    placeholder="15-digit GSTIN"
                    maxLength={15}
                    className="bg-white border-slate-200 uppercase"
                  />
                </div>
                <div className="space-y-2">
                  <Label className="text-[10px] uppercase font-bold text-slate-500">Registered Address</Label>
                  <Input
                    value={statutoryForm.registeredAddress}
                    onChange={(e) => onStatutoryFormChange({ ...statutoryForm, registeredAddress: e.target.value })}
                    placeholder="Enter Registered Office Address"
                    className="bg-white border-slate-200"
                  />
                </div>
                <div className="space-y-2">
                  <Label className="text-[10px] uppercase font-bold text-slate-500">Bank Name</Label>
                  <Input
                    value={statutoryForm.bankName}
                    onChange={(e) => onStatutoryFormChange({ ...statutoryForm, bankName: e.target.value })}
                    placeholder="Enter Bank Name"
                    className="bg-white border-slate-200"
                  />
                </div>
                <div className="space-y-2">
                  <Label className="text-[10px] uppercase font-bold text-slate-500">Account Number</Label>
                  <Input
                    value={statutoryForm.accountNumber}
                    onChange={(e) => onStatutoryFormChange({ ...statutoryForm, accountNumber: e.target.value })}
                    placeholder="Enter Account Number"
                    className="bg-white border-slate-200"
                  />
                </div>
                <div className="space-y-2">
                  <Label className="text-[10px] uppercase font-bold text-slate-500">IFSC Code</Label>
                  <Input
                    value={statutoryForm.ifscCode}
                    onChange={(e) => onStatutoryFormChange({ ...statutoryForm, ifscCode: e.target.value.toUpperCase() })}
                    placeholder="11-digit IFSC"
                    maxLength={11}
                    className="bg-white border-slate-200 uppercase"
                  />
                </div>
              </div>
              <div className="flex justify-end gap-3 pt-4 border-t">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={onCancelEditStatutory}
                  disabled={isSavingStatutory}
                >
                  Cancel
                </Button>
                <Button
                  size="sm"
                  onClick={onSaveStatutory}
                  disabled={isSavingStatutory}
                  className="bg-amber-600 hover:bg-amber-700"
                >
                  {isSavingStatutory ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Save Details'}
                </Button>
              </div>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 bg-slate-50/50 p-4 rounded-xl border border-slate-100">
              <div className="space-y-1">
                <p className="text-[10px] text-slate-500 uppercase font-bold tracking-tight">Legal Entity Name</p>
                <p className="text-xs font-semibold text-slate-900">{application.accountHolderName || 'Pending'}</p>
              </div>
              <div className="space-y-1">
                <p className="text-[10px] text-slate-500 uppercase font-bold tracking-tight">PAN Number</p>
                <p className="text-xs font-semibold text-slate-900 uppercase">{application.panNumber || 'Pending'}</p>
              </div>
              <div className="space-y-1">
                <p className="text-[10px] text-slate-500 uppercase font-bold tracking-tight">GST Number</p>
                <p className="text-xs font-semibold text-slate-900 uppercase">{application.gstNumber || 'Pending'}</p>
              </div>
              <div className="space-y-1">
                <p className="text-[10px] text-slate-500 uppercase font-bold tracking-tight">Registered Address</p>
                <p className="text-xs font-semibold text-slate-900">{application.registeredAddress || 'Pending'}</p>
              </div>
              <div className="space-y-1">
                <p className="text-[10px] text-slate-500 uppercase font-bold tracking-tight">Bank Details</p>
                <p className="text-xs font-semibold text-slate-900">{application.bankName || 'N/A'}</p>
                <p className="text-[10px] text-slate-600">A/C: {application.accountNumber || 'N/A'}</p>
                <p className="text-[10px] text-slate-600">IFSC: {application.ifscCode || 'N/A'}</p>
              </div>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}