'use client';

import React, { useState } from 'react';
import { Edit, Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Modal } from '@/components/ui/modal';
import { useUpdateInstitute } from '@/services/institutes/queries';

interface UpdateInstituteModalProps {
  institute: {
    id: string;
    name: string;
    code: string;
    sectorId: string;
    address: string | null;
    contactPerson: string | null;
    contactMobile: string | null;
    contactEmail: string | null;
    isActive: boolean;
  };
  onClose: () => void;
}

export default function UpdateInstituteModal({ institute, onClose }: UpdateInstituteModalProps) {
  const [name, setName] = useState(institute.name);
  const [address, setAddress] = useState(institute.address || '');
  const [contactPerson, setContactPerson] = useState(institute.contactPerson || '');
  const [contactMobile, setContactMobile] = useState(institute.contactMobile || '');
  const [contactEmail, setContactEmail] = useState(institute.contactEmail || '');
  const [isActive, setIsActive] = useState(institute.isActive);

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

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

    if (!name.trim()) {
      setError('Nomenclature adjustments cannot be blank.');
      return;
    }

    if (contactEmail.trim() && !/\S+@\S+\.\S+/.test(contactEmail)) {
      setError('Invalid email structure modification entry.');
      return;
    }

    const payload = {
      name: name.trim(),
      address: address.trim() || null,
      contactPerson: contactPerson.trim() || null,
      contactMobile: contactMobile.trim() || null,
      contactEmail: contactEmail.trim().toLowerCase() || null,
      isActive: isActive,
    };

    try {
      await updateMutation.mutateAsync({ id: institute.id, data: payload });
      onClose();
    } catch (err: any) {
      setError(err?.response?.data?.message || 'Failed to update administrative entity configuration settings.');
    }
  };

  return (
    <Modal
      onClose={onClose}
      icon={Edit}
      iconClassName="text-primary"
      title={`Modify Configuration: [${institute.code}]`}
    >
      <form onSubmit={handleSubmit} className="p-4 space-y-4">
        {error && (
          <div className="p-2.5 rounded-lg border border-destructive/20 bg-destructive/5 text-destructive text-[10px] font-medium tracking-tight">
            {error}
          </div>
        )}

        <div className="space-y-3">
          <div>
            <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
              Institute Nomenclature Name
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(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 transition-colors"
              required
            />
          </div>

          <div>
            <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
              Physical Location Base Address
            </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 transition-colors"
            />
          </div>

          <div className="grid grid-cols-2 gap-2">
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Contact Person Name
              </label>
              <input
                type="text"
                value={contactPerson}
                onChange={(e) => setContactPerson(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 transition-colors"
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Mobile Line Identifier
              </label>
              <input
                type="text"
                value={contactMobile}
                onChange={(e) => setContactMobile(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 transition-colors"
              />
            </div>
          </div>

          <div>
            <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
              Primary Communication Email
            </label>
            <input
              type="email"
              value={contactEmail}
              onChange={(e) => setContactEmail(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 transition-colors"
            />
          </div>

          <div className="flex items-center gap-2 pt-1">
            <input
              type="checkbox"
              id="isActiveModal"
              checked={isActive}
              onChange={(e) => setIsActive(e.target.checked)}
              className="h-3.5 w-3.5 border-border/40 bg-background rounded text-primary focus:ring-primary cursor-pointer"
            />
            <label htmlFor="isActiveModal" className="text-[10px] font-bold uppercase tracking-wider text-foreground cursor-pointer select-none">
              Workspace Operational Routing Active
            </label>
          </div>
        </div>

        {/* MODAL BOTTOM CONTROLS ACTIONS BAR */}
        <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"
          >
            Discard Changes
          </Button>
          <Button
            type="submit"
            disabled={updateMutation.isPending}
            className="h-8 rounded-lg px-3 text-xs font-semibold shadow-sm gap-1.5 transition-transform duration-150 active:scale-95"
          >
            <Check className="h-3.5 w-3.5 stroke-[2.5]" />
            <span>{updateMutation.isPending ? 'Modifying Node State...' : 'Save Configuration'}</span>
          </Button>
        </div>
      </form>
    </Modal>
  );
}