'use client';

import React, { useState, useEffect } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { ArrowLeft, Building2, UserPlus, Check, CreditCard, FileCheck } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useUpdateUserProfile } from '@/services/users/mutations';
import { useUser } from '@/services/users/queries';

export default function EditUserProfilePage() {
  const router = useRouter();
  const params = useParams();
  const userId = params.id as string;

  const updateProfileMutation = useUpdateUserProfile();

  // Clean isolated user lookup using useUser
  const { data: responseData, isLoading } = useUser(userId);
  const targetUser = (responseData as any)?.data || responseData;

  // Identity states
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [phone, setPhone] = useState('');

  // Profile address & corporate states
  const [address, setAddress] = useState('');
  const [city, setCity] = useState('');
  const [state, setState] = useState('Maharashtra');
  const [postalCode, setPostalCode] = useState('');
  const [orgName, setOrgName] = useState('');
  const [taxId, setTaxId] = useState('');
  const [corpRegNo, setCorpRegNo] = useState('');
  const [landline, setLandline] = useState('');

  // Identification & Verification states
  const [aadhaarNumber, setAadhaarNumber] = useState('');
  const [panNumber, setPanNumber] = useState('');

  // Banking & Settlement states
  const [bankName, setBankName] = useState('');
  const [bankAccountHolder, setBankAccountHolder] = useState('');
  const [bankAccountNumber, setBankAccountNumber] = useState('');
  const [bankIFSC, setBankIFSC] = useState('');

  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (targetUser) {
      setFirstName(targetUser.firstName || '');
      setLastName(targetUser.lastName || '');
      setPhone(targetUser.phone || '');

      const profile = targetUser.userProfile;
      if (profile) {
        setAddress(profile.registeredOfficeAddress || '');
        setCity(profile.city || '');
        setState(profile.state || 'Maharashtra');
        setPostalCode(profile.postalCode || '');
        setOrgName(profile.organizationName || '');
        setTaxId(profile.taxIdentifier || '');
        setCorpRegNo(profile.corporateRegNumber || '');
        setLandline(profile.officialLandline || '');

        // Populate Identification and Banking
        setAadhaarNumber(profile.aadhaarNumber || '');
        setPanNumber(profile.panNumber || '');
        setBankName(profile.bankName || '');
        setBankAccountHolder(profile.bankAccountHolder || '');
        setBankAccountNumber(profile.bankAccountNumber || '');
        setBankIFSC(profile.bankIFSC || '');
      }
    }
  }, [targetUser]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    if (!firstName.trim() || !lastName.trim()) {
      setError('First name and Last name are required.');
      return;
    }
    if (!address.trim() || !city.trim() || !postalCode.trim()) {
      setError('Office address, city, and postal code must be fully specified.');
      return;
    }

    try {
      await updateProfileMutation.mutateAsync({
        userId,
        payload: {
          newUser: {
            firstName: firstName.trim(),
            lastName: lastName.trim(),
            phone: phone.trim() || null,
          },
          profile: {
            registeredOfficeAddress: address.trim(),
            city: city.trim(),
            state: state.trim(),
            postalCode: postalCode.trim(),
            organizationName: orgName.trim() || null,
            taxIdentifier: taxId.trim() || null,
            corporateRegNumber: corpRegNo.trim() || null,
            officialLandline: landline.trim() || null,

            // Identification
            aadhaarNumber: aadhaarNumber.trim() || null,
            panNumber: panNumber.trim() || null,

            // Settlement & Banking
            bankName: bankName.trim() || null,
            bankAccountHolder: bankAccountHolder.trim() || null,
            bankAccountNumber: bankAccountNumber.trim() || null,
            bankIFSC: bankIFSC.trim() || null,
          },
        },
      });
      router.push('/users');
    } catch (err: any) {
      setError(err?.response?.data?.message || 'Profile synchronization failed.');
    }
  };

  if (isLoading) {
    return (
      <div className="p-8 text-center text-xs animate-pulse font-bold tracking-widest text-muted-foreground">
        REFRESHING METADATA WORKSPACES...
      </div>
    );
  }

  return (
    <div className="max-w-7xl space-y-6 animate-in fade-in duration-200 select-none min-h-screen relative pb-10">
      {/* Page Header */}
      <div className="flex items-center gap-3">
        <Button variant="outline" size="icon" className="h-8 w-8 rounded-lg cursor-pointer" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div>
          <h1 className="text-sm font-black tracking-widest text-foreground uppercase">
            Modify Administrative Identity Parameters
          </h1>
          <p className="text-[11px] text-muted-foreground/70">
            Update corporate contact records, identification numbers, and settlement parameters safely.
          </p>
        </div>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        {error && (
          <div className="p-3 bg-destructive/5 border border-destructive/20 text-destructive text-xs rounded-lg font-medium">
            {error}
          </div>
        )}

        {/* SECTION 1: Identity & Communications */}
        <div className="border border-border/40 rounded-xl bg-surface p-4 space-y-4 shadow-sm">
          <div className="flex items-center gap-2 border-b border-border/10 pb-2">
            <UserPlus className="h-4 w-4 text-primary" />
            <h2 className="text-xs font-bold uppercase tracking-wider text-foreground">
              Identity & Core Communications
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                First Name *
              </label>
              <input
                type="text"
                value={firstName}
                onChange={(e) => setFirstName(e.target.value)}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
                required
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Last Name *
              </label>
              <input
                type="text"
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
                required
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Mobile Contact Line
              </label>
              <input
                type="text"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                placeholder="+91 XXXXX XXXXX"
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>
          </div>
        </div>

        {/* SECTION 2: Registered Corporate Details */}
        <div className="border border-border/40 rounded-xl bg-surface p-4 space-y-4 shadow-sm">
          <div className="flex items-center gap-2 border-b border-border/10 pb-2">
            <Building2 className="h-4 w-4 text-primary" />
            <h2 className="text-xs font-bold uppercase tracking-wider text-foreground">
              Registered Corporate Profile Details
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div className="md:col-span-3">
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Registered Address Route *
              </label>
              <input
                type="text"
                value={address}
                onChange={(e) => setAddress(e.target.value)}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
                required
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                City Node Location *
              </label>
              <input
                type="text"
                value={city}
                onChange={(e) => setCity(e.target.value)}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
                required
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                State Jurisdiction *
              </label>
              <input
                type="text"
                value={state}
                onChange={(e) => setState(e.target.value)}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
                required
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Postal Code (ZIP) *
              </label>
              <input
                type="text"
                value={postalCode}
                onChange={(e) => setPostalCode(e.target.value)}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
                required
              />
            </div>

            <div className="border-t border-border/10 md:col-span-3 my-1 pt-2">
              <span className="text-[10px] uppercase font-extrabold tracking-widest text-muted-foreground/60">
                Corporate Registries
              </span>
            </div>

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Organization Nomenclature
              </label>
              <input
                type="text"
                value={orgName}
                onChange={(e) => setOrgName(e.target.value)}
                placeholder="Entity Pvt. Ltd."
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Tax Reference Identifier (GSTIN)
              </label>
              <input
                type="text"
                value={taxId}
                onChange={(e) => setTaxId(e.target.value)}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Corporate Registration Code (CIN)
              </label>
              <input
                type="text"
                value={corpRegNo}
                onChange={(e) => setCorpRegNo(e.target.value)}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>
            <div className="md:col-span-3">
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Official Landline
              </label>
              <input
                type="text"
                value={landline}
                onChange={(e) => setLandline(e.target.value)}
                placeholder="022-XXXXXXXX"
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>
          </div>
        </div>

        {/* SECTION 3: Identification & Verification Numbers */}
        <div className="border border-border/40 rounded-xl bg-surface p-4 space-y-4 shadow-sm">
          <div className="flex items-center gap-2 border-b border-border/10 pb-2">
            <FileCheck className="h-4 w-4 text-primary" />
            <h2 className="text-xs font-bold uppercase tracking-wider text-foreground">
              Official Identification Details
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Aadhaar Card Number
              </label>
              <input
                type="text"
                value={aadhaarNumber}
                onChange={(e) => setAadhaarNumber(e.target.value)}
                placeholder="XXXX XXXX XXXX"
                maxLength={14}
                className="w-full text-xs font-mono font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                PAN Card Number
              </label>
              <input
                type="text"
                value={panNumber}
                onChange={(e) => setPanNumber(e.target.value)}
                placeholder="ABCDE1234F"
                maxLength={10}
                className="w-full text-xs font-mono font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary uppercase"
              />
            </div>
          </div>
        </div>

        {/* SECTION 4: Banking & Settlement Parameters */}
        <div className="border border-border/40 rounded-xl bg-surface p-4 space-y-4 shadow-sm">
          <div className="flex items-center gap-2 border-b border-border/10 pb-2">
            <CreditCard className="h-4 w-4 text-primary" />
            <h2 className="text-xs font-bold uppercase tracking-wider text-foreground">
              Banking & Settlement Parameters
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Bank Name
              </label>
              <input
                type="text"
                value={bankName}
                onChange={(e) => setBankName(e.target.value)}
                placeholder="State Bank of India"
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Account Holder Name
              </label>
              <input
                type="text"
                value={bankAccountHolder}
                onChange={(e) => setBankAccountHolder(e.target.value)}
                placeholder="Name as per Bank Record"
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Bank Account Number
              </label>
              <input
                type="text"
                value={bankAccountNumber}
                onChange={(e) => setBankAccountNumber(e.target.value)}
                placeholder="9-18 Digits"
                className="w-full text-xs font-mono font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Bank IFSC Code
              </label>
              <input
                type="text"
                value={bankIFSC}
                onChange={(e) => setBankIFSC(e.target.value)}
                placeholder="SBIN000XXXX"
                maxLength={11}
                className="w-full text-xs font-mono font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary uppercase"
              />
            </div>
          </div>
        </div>

        {/* Sticky Action Footer */}
        <div className="sticky bottom-0 w-full bg-surface border border-border/40 py-4 px-6 z-40 flex items-center justify-end gap-3 shadow-xl rounded-xl">
          <Button type="button" variant="ghost" onClick={() => router.back()} className="h-9 text-xs font-semibold cursor-pointer">
            Discard Parameters
          </Button>
          <Button
            type="submit"
            disabled={updateProfileMutation.isPending}
            className="h-9 rounded-lg px-4 text-xs font-semibold bg-primary text-primary-foreground gap-1.5 shadow-sm cursor-pointer"
          >
            <Check className="h-4 w-4 stroke-[2.5]" />
            <span>
              {updateProfileMutation.isPending ? 'Synchronizing Workspace...' : 'Save Configuration Changes'}
            </span>
          </Button>
        </div>
      </form>
    </div>
  );
}