'use client';

import React, { useEffect, useState, useMemo } from 'react';
import { Plus, Globe } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Modal } from '@/components/ui/modal'; // Path to your new atomic modal wrapper
import { useAllStates } from '@/services/states/queries';

// Import your json dataset
import indiaData from '@/data/india-states-districts.json';
import { useCreateDistrict } from '@/services/districts/mutations';
import { UniversalApiError } from '@/lib/axios';

interface CreateDistrictModalProps {
  onClose: () => void;
}

export default function CreateDistrictModal({ onClose }: CreateDistrictModalProps) {
  const [name, setName] = useState('');
  const [code, setCode] = useState('');
  const [stateId, setStateId] = useState('');
  const [error, setError] = useState<string | null>(null);

  const { data } = useAllStates();

  // Set default state when states list loads
  useEffect(() => {
    const firstState = data?.items?.at(0);
    if (firstState && !stateId) {
      setStateId(firstState.id);
    }
  }, [data, stateId]);

  // Find the selected state's details from database query
  const selectedStateObj = useMemo(() => {
    return data?.items?.find((s) => s.id === stateId);
  }, [data, stateId]);

  // Filter districts from local JSON matching the selected state name
  const filteredDistricts = useMemo(() => {
    if (!selectedStateObj) return [];
    const matchedState = indiaData.find(
      (item) => item.state.toLowerCase() === selectedStateObj.name.toLowerCase()
    );
    return matchedState?.districts || [];
  }, [selectedStateObj]);

  // Reset district name & code when state selection changes
  useEffect(() => {
    setName('');
    setCode('');
  }, [stateId]);

  // Handle District Dropdown Selection
  const handleDistrictChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedDistrictName = e.target.value;
    setName(selectedDistrictName);

    const districtObj = filteredDistricts.find((d) => d.name === selectedDistrictName);
    if (districtObj) {
      setCode(districtObj.code || '');
    } else {
      setCode('');
    }
  };

  const createMutation = useCreateDistrict();

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

    if (!name.trim() || !code.trim() || !stateId) {
      setError('All explicit structural fields are mandatory.');
      return;
    }

    try {
      await createMutation.mutateAsync({
        name: name.trim(),
        code: code.trim().toUpperCase(),
        stateId,
      });
      onClose();
    } catch (err) {
      // ✅ Pull the normalized message directly
      const apiError = err as UniversalApiError;
      setError(apiError?.message || 'Failed to initialize administrative account records.');
    }
  };

  return (
    <Modal
      onClose={onClose}
      icon={Globe}
      iconClassName="text-primary"
      title="Deploy Administrative Unit"
    >
      <form onSubmit={handleSubmit} className="p-4 space-y-4">
        {error && (
          <div className="p-2.5 rounded-lg border border-danger/20 bg-danger/5 text-danger text-[10px] font-medium tracking-tight">
            {error}
          </div>
        )}

        <div className="space-y-3">
          {/* State Jurisdiction Dropdown */}
          <div>
            <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
              State Jurisdiction Axis
            </label>
            <select
              value={stateId}
              onChange={(e) => setStateId(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
            >
              <option value="" disabled>
                Select State...
              </option>
              {data?.items?.map((state) => (
                <option key={state.id} value={state.id}>
                  {state.name}
                </option>
              ))}
            </select>
          </div>

          {/* Filtered District Geo-Name Dropdown */}
          <div>
            <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
              District Geo-Name
            </label>
            <select
              value={name}
              onChange={handleDistrictChange}
              disabled={!stateId || filteredDistricts.length === 0}
              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 disabled:opacity-50"
              required
            >
              <option value="">
                {filteredDistricts.length > 0
                  ? 'Select District Parameter...'
                  : 'No districts found for selected state'}
              </option>
              {filteredDistricts.map((district) => (
                <option key={district.code || district.name} value={district.name}>
                  {district.name} ({district.code})
                </option>
              ))}
            </select>
          </div>

          {/* Alpha System Code Input */}
          <div>
            <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
              Alpha System Code
            </label>
            <input
              type="text"
              value={code}
              onChange={(e) => setCode(e.target.value.toUpperCase())}
              placeholder="e.g., NGP"
              maxLength={6}
              readOnly
              className="w-full text-xs font-mono font-semibold px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground placeholder:text-muted-foreground/40 focus:outline-none focus:border-primary transition-colors uppercase"
              required
            />
          </div>
        </div>

        {/* ACTION BUTTON AXIS */}
        <div className="flex items-center justify-end gap-2 border-t border-border/10 pt-3 mt-4">
          <Button
            type="button"
            variant="ghost"
            onClick={onClose}
            className="h-8 rounded-lg px-3 text-xs font-semibold transition-colors"
          >
            Cancel
          </Button>
          <Button
            type="submit"
            disabled={createMutation.isPending}
            className="h-8 rounded-lg px-3 text-xs font-semibold shadow-sm gap-1.5 transition-transform duration-150 active:scale-95"
          >
            <Plus className="h-3.5 w-3.5 stroke-[2.5]" />
            <span>{createMutation.isPending ? 'Deploying...' : 'Deploy Zone'}</span>
          </Button>
        </div>
      </form>
    </Modal>
  );
}