'use client';

import React, { useState } from 'react';
import { Plus, Globe } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Modal } from '@/components/ui/modal';

// Import your json dataset (or keep inline if preferred)
import indiaData from '@/data/india-states-districts.json';
import { useCreateState } from '@/services/states/mutations';

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

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

  const createMutation = useCreateState();

  // Triggered when user selects a State from the dropdown
  const handleStateChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedStateName = e.target.value;
    setName(selectedStateName);

    // Find the state object from JSON data to auto-fill its real code
    const matchedState = indiaData.find((item) => item.state === selectedStateName);
    if (matchedState) {
      setCode(matchedState.code);
    } else {
      setCode('');
    }
  };

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

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

    try {
      await createMutation.mutateAsync({
        name: name.trim(),
        code: code.trim().toUpperCase(),
      });
      onClose();
    } catch (err: any) {
      // 1. Extract message from Axios response payload first
      const serverMessage =
        err?.response?.data?.message ||
        err?.response?.data?.error ||
        err?.message ||
        'Failed to register the requested administrative boundary.';

      // 2. Set UI state error
      setError(serverMessage);

      // Log for developer debugging
      console.error('Boundary Registration Error Details:', {
        status: err?.response?.status,
        data: err?.response?.data,
        rawError: err,
      });
    }
  };

  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 Select Dropdown */}
          <div>
            <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
              State Geo-Name
            </label>
            <select
              value={name}
              onChange={handleStateChange}
              className="w-full text-xs font-medium px-2 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              required
            >
              <option value="">Select State Parameter...</option>
              {indiaData.map((item) => (
                <option key={item.code} value={item.state}>
                  {item.state} ({item.code})
                </option>
              ))}
            </select>
          </div>

          {/* Real System Code Input Field */}
          <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., MH"
              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>
  );
}