"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Plus, X } from "lucide-react";

type Zone = {
  id: string;
  name: string;
  svgId: string;
  status: string;
  projects: string[];
  beneficiaries: string | null;
  published: boolean;
};

type ZoneFormData = {
  name: string;
  svgId: string;
  status: string;
  projects: string[];
  beneficiaries: string;
  published: boolean;
};

const STATUSES = [
  { value: "priority", label: "Prioritaire", color: "#4A7C59" },
  { value: "relationship", label: "Relation", color: "#7F8C8D" },
  { value: "inactive", label: "Inactif", color: "#BDC3C7" },
];

// Complete zone templates with all default data
const ZONE_TEMPLATES = [
  {
    name: "Nouakchott",
    svgId: "MR13",
    status: "priority",
    projects: [
      "Système de surveillance alimentaire",
      "Enquêtes SMART et M&E",
      "Coordination avec partenaires internationaux",
    ],
    beneficiaries: "Population urbaine vulnérable",
  },
  {
    name: "Trarza",
    svgId: "MR06",
    status: "relationship",
    projects: ["Projets de partenariat", "Suivi nutritionnel"],
    beneficiaries: "",
  },
  {
    name: "Brakna",
    svgId: "MR05",
    status: "priority",
    projects: [
      "Production d'aliments de complément",
      "CREN - Centres de récupération nutritionnelle",
      "Entrepreneuriat féminin",
    ],
    beneficiaries: "Enfants < 5 ans, femmes enceintes",
  },
  {
    name: "Gorgol",
    svgId: "MR04",
    status: "priority",
    projects: [
      "NUTRIRIM - Cash Transfer",
      "Fortification alimentaire",
      "Les 1000 premiers jours",
    ],
    beneficiaries: "15,000+ bénéficiaires",
  },
  {
    name: "Guidimakha",
    svgId: "MR10",
    status: "priority",
    projects: [
      "Sécurité alimentaire des ménages",
      "AGR - Activités génératrices de revenus",
      "Surveillance nutritionnelle",
    ],
    beneficiaries: "Communautés rurales",
  },
  {
    name: "Assaba",
    svgId: "MR03",
    status: "priority",
    projects: [
      "PAISA-BG - Surveillance alimentaire",
      "Distribution d'aliments enrichis",
      "Formation en nutrition",
    ],
    beneficiaries: "Zones pastorales",
  },
  {
    name: "Hodh El Gharbi",
    svgId: "MR02",
    status: "priority",
    projects: [
      "Lutte contre la malnutrition aiguë",
      "Diversification alimentaire",
      "Système M&E avec PAM",
    ],
    beneficiaries: "8,000+ enfants traités",
  },
  {
    name: "Hodh Ech Chargui",
    svgId: "MR01",
    status: "priority",
    projects: [
      "CREN mobiles",
      "Transferts monétaires d'urgence",
      "Renforcement de la résilience",
    ],
    beneficiaries: "Zones reculées",
  },
  {
    name: "Tagant",
    svgId: "MR09",
    status: "relationship",
    projects: ["Partenariats ponctuels", "Enquêtes nutritionnelles"],
    beneficiaries: "",
  },
  {
    name: "Adrar",
    svgId: "MR07",
    status: "inactive",
    projects: ["Zone non couverte actuellement"],
    beneficiaries: "",
  },
  {
    name: "Dakhlet Nouadhibou",
    svgId: "MR08",
    status: "inactive",
    projects: ["Zone non couverte actuellement"],
    beneficiaries: "",
  },
  {
    name: "Inchiri",
    svgId: "MR12",
    status: "relationship",
    projects: ["Partenariat Kinross/Tasiast", "Nutrition communautaire"],
    beneficiaries: "",
  },
  {
    name: "Tiris Zemmour",
    svgId: "MR11",
    status: "inactive",
    projects: ["Zone non couverte actuellement"],
    beneficiaries: "",
  },
];

export default function ZoneForm({ zoneId, onSuccess, onCancel }: { zoneId?: string; onSuccess?: () => void; onCancel?: () => void }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [existingZoneId, setExistingZoneId] = useState<string | undefined>(zoneId);
  const [isEditMode, setIsEditMode] = useState(!!zoneId);
  const [formData, setFormData] = useState<ZoneFormData>({
    name: "",
    svgId: "",
    status: "priority",
    projects: [""],
    beneficiaries: "",
    published: false,
  });

  useEffect(() => {
    if (zoneId) {
      fetch(`/api/admin/zones/${zoneId}`)
        .then((res) => res.json())
        .then((data) => setFormData(data));
    }
  }, [zoneId]);

  const addProject = () => {
    setFormData({ ...formData, projects: [...formData.projects, ""] });
  };

  const updateProject = (index: number, value: string) => {
    const newProjects = [...formData.projects];
    newProjects[index] = value;
    setFormData({ ...formData, projects: newProjects });
  };

  const removeProject = (index: number) => {
    const newProjects = formData.projects.filter((_, i) => i !== index);
    setFormData({ ...formData, projects: newProjects });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const effectiveZoneId = existingZoneId || zoneId;
      const url = effectiveZoneId
        ? `/api/admin/zones/${effectiveZoneId}`
        : "/api/admin/zones";
      const method = effectiveZoneId ? "PUT" : "POST";

      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });

      if (res.ok) {
        if (onSuccess) { onSuccess(); } else { router.push("/admin/zones"); router.refresh(); }
      } else {
        alert("Erreur lors de l'enregistrement");
      }
    } catch (error) {
      console.error("Submit error:", error);
      alert("Erreur lors de l'enregistrement");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Name */}
      <div>
        <label className="block text-sm font-bold text-gray-700 mb-2">
          Nom de la zone <span className="text-red-500">*</span>
        </label>
        <select
          required
          value={formData.name}
          onChange={async (e) => {
            const selectedTemplate = ZONE_TEMPLATES.find(z => z.name === e.target.value);
            if (!selectedTemplate) return;

            // Check if zone already exists in database
            try {
              const res = await fetch(`/api/admin/zones?name=${encodeURIComponent(selectedTemplate.name)}`);
              const zones = await res.json();
              const existingZone = zones.find((z: Zone) => z.name === selectedTemplate.name);

              if (existingZone) {
                // Zone exists - switch to edit mode with existing data
                setExistingZoneId(existingZone.id);
                setIsEditMode(true);
                setFormData({
                  name: existingZone.name,
                  svgId: existingZone.svgId,
                  status: existingZone.status,
                  projects: existingZone.projects,
                  beneficiaries: existingZone.beneficiaries || "",
                  published: existingZone.published,
                });
              } else {
                // Zone doesn't exist - use template data for new zone
                setExistingZoneId(undefined);
                setIsEditMode(false);
                setFormData({
                  ...formData,
                  name: selectedTemplate.name,
                  svgId: selectedTemplate.svgId,
                  status: selectedTemplate.status,
                  projects: [...selectedTemplate.projects],
                  beneficiaries: selectedTemplate.beneficiaries,
                });
              }
            } catch (error) {
              console.error("Error checking zone:", error);
              // Fallback to template data
              setFormData({
                ...formData,
                name: selectedTemplate.name,
                svgId: selectedTemplate.svgId,
                status: selectedTemplate.status,
                projects: [...selectedTemplate.projects],
                beneficiaries: selectedTemplate.beneficiaries,
              });
            }
          }}
          className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#4A7C59] focus:border-[#4A7C59]"
          disabled={!!zoneId}
        >
          <option value="">Sélectionner une wilaya...</option>
          {ZONE_TEMPLATES.map((zone) => (
            <option key={zone.svgId} value={zone.name}>
              {zone.name}
            </option>
          ))}
        </select>
        {zoneId ? (
          <p className="text-xs text-gray-500 mt-1">
            La zone ne peut pas être modifiée après création
          </p>
        ) : isEditMode ? (
          <p className="text-xs text-orange-600 mt-1 font-medium">
            ⚠️ Cette zone existe déjà - Mode modification
          </p>
        ) : (
          <p className="text-xs text-green-600 mt-1">
            ✓ Les données par défaut seront automatiquement remplies
          </p>
        )}
      </div>

      {/* Status */}
      <div>
        <label className="block text-sm font-bold text-gray-700 mb-2">
          Statut <span className="text-red-500">*</span>
        </label>
        <select
          required
          value={formData.status}
          onChange={(e) => setFormData({ ...formData, status: e.target.value })}
          className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#4A7C59] focus:border-[#4A7C59]"
        >
          {STATUSES.map((status) => (
            <option key={status.value} value={status.value}>
              {status.label}
            </option>
          ))}
        </select>
      </div>

      {/* Beneficiaries */}
      <div>
        <label className="block text-sm font-bold text-gray-700 mb-2">
          Bénéficiaires
        </label>
        <input
          type="text"
          value={formData.beneficiaries}
          onChange={(e) => setFormData({ ...formData, beneficiaries: e.target.value })}
          className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#4A7C59] focus:border-[#4A7C59]"
          placeholder="Ex: 15,000+ bénéficiaires"
        />
      </div>

      {/* Projects */}
      <div>
        <div className="flex items-center justify-between mb-2">
          <label className="block text-sm font-bold text-gray-700">
            Projets <span className="text-red-500">*</span>
          </label>
          <button
            type="button"
            onClick={addProject}
            className="flex items-center gap-1 text-sm text-[#4A7C59] hover:text-[#3d6849] font-medium"
          >
            <Plus size={16} />
            Ajouter
          </button>
        </div>
        <div className="space-y-3">
          {formData.projects.map((project, index) => (
            <div key={index} className="flex items-center gap-2">
              <input
                type="text"
                required
                value={project}
                onChange={(e) => updateProject(index, e.target.value)}
                className="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#4A7C59] focus:border-[#4A7C59]"
                placeholder={`Projet ${index + 1}`}
              />
              {formData.projects.length > 1 && (
                <button
                  type="button"
                  onClick={() => removeProject(index)}
                  className="p-2 text-red-600 hover:bg-red-50 rounded-lg"
                >
                  <X size={18} />
                </button>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Published */}
      <div>
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="checkbox"
            checked={formData.published}
            onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
            className="w-5 h-5 rounded border-gray-300 text-[#4A7C59] focus:ring-[#4A7C59]"
          />
          <span className="text-sm font-medium text-gray-700">Publier immédiatement</span>
        </label>
      </div>

      {/* Actions */}
      <div className="flex items-center gap-4 pt-4">
        <button
          type="submit"
          disabled={loading}
          className="px-8 py-3 bg-[#4A7C59] hover:bg-[#3d6849] text-white font-semibold rounded-xl transition-all disabled:opacity-50"
        >
          {loading ? "Enregistrement..." : (zoneId || isEditMode) ? "Mettre à jour" : "Créer la zone"}
        </button>
        <button
          type="button"
          onClick={() => { if (onCancel) { onCancel(); } else { router.back(); } }}
          className="px-8 py-3 border-2 border-gray-300 hover:bg-gray-50 text-gray-700 font-semibold rounded-xl transition-all"
        >
          Annuler
        </button>
      </div>
    </form>
  );
}