"use client";

import React, { useEffect, useState, ChangeEvent } from "react";
import { FaFileAlt } from "react-icons/fa";
import toast from "react-hot-toast";
import styles from "../../commonstyle/FormStyles.module.css";  // ✅ shared generic CSS
import { createStandard, updateStandard, getStandard } from "@/lib/api/standard.api";
import type { CreateStandardDto } from "@/lib/api/types/standard.types";

interface Props {
  isOpen: boolean;
  onClose: () => void;
  refreshData?: () => void;
  editId?: number | null;
}

const DEFAULT: CreateStandardDto = { name: "", title: "" };

export default function StandardForm({ isOpen, onClose, refreshData, editId }: Props) {
  const isEdit = Boolean(editId);
  const [form, setForm]         = useState<CreateStandardDto>({ ...DEFAULT });
  const [errors, setErrors]     = useState<Record<string, string>>({});
  const [touched, setTouched]   = useState<Record<string, boolean>>({});
  const [saving, setSaving]     = useState(false);
  const [loadingEdit, setLoadingEdit] = useState(false);

  // Hydrate on edit
  useEffect(() => {
    if (!isOpen) return;
    if (editId) {
      setLoadingEdit(true);
      getStandard(editId)
        .then((s) => setForm({ name: s.name || "", title: s.title || "" }))
        .catch(() => toast.error("Failed to load standard"))
        .finally(() => setLoadingEdit(false));
    } else {
      setForm({ ...DEFAULT }); setErrors({}); setTouched({});
    }
  }, [isOpen, editId]);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setForm((p) => ({ ...p, [name]: value }));
    setTouched((p) => ({ ...p, [name]: true }));
    setErrors((p) => ({ ...p, [name]: "" }));
  };

  const showErr = (key: string) => !!(errors[key] && touched[key]);

  const validate = () => {
    const e: Record<string, string> = {};
    if (!form.name.trim()) e.name = "Standard name is required";
    setErrors(e);
    setTouched((p) => ({ ...p, ...Object.fromEntries(Object.keys(e).map((k) => [k, true])) }));
    return Object.keys(e).length === 0;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validate()) return;
    setSaving(true);
    try {
      if (isEdit && editId) { await updateStandard(editId, form); toast.success("Standard updated"); }
      else                  { await createStandard(form);         toast.success("Standard created"); }
      onClose(); refreshData?.();
    } catch (err: any) { toast.error(err?.message ?? "Failed to save standard"); }
    finally { setSaving(false); }
  };

  if (!isOpen) return null;

  return (
    <div className={styles.modalOverlay} onClick={onClose}>
      <div className={styles.modalContent} style={{ maxWidth: "480px" }} onClick={(e) => e.stopPropagation()}>

        {/* Header */}
        <div className={styles.modalHeader}>
          <div>
            <h2 className={styles.modalTitle}>
              {isEdit ? "✏️ Edit Standard" : "📋 New Standard"}
            </h2>
            <p className={styles.modalSubtitle}>
              {isEdit ? "Update ISO standard details" : "Add a new ISO standard"}
            </p>
          </div>
          <button className={styles.closeBtn} onClick={onClose} type="button">✕</button>
        </div>

        {loadingEdit ? (
          <div className={styles.loadingSpinner}>
            <div className={styles.loadingSpinnerIcon} />Loading...
          </div>
        ) : (
          <form onSubmit={handleSubmit} className={styles.form}>
            <div className={styles.formBody}>

              {/* Standard Name */}
              <div className={styles.formGroup}>
                <label className={styles.label}>
                  Standard Name <span style={{ color: "#ef4444" }}>*</span>
                </label>
                {/* Icon input — mirrors React FaFileAlt pattern */}
                <div style={{ position: "relative" }}>
                  <span style={{ position: "absolute", left: "10px", top: "50%", transform: "translateY(-50%)", color: "#8e24aa", pointerEvents: "none" }}>
                    <FaFileAlt size={14} />
                  </span>
                  <input
                    name="name"
                    value={form.name}
                    onChange={handleChange}
                    placeholder="e.g. ISO 9001:2015"
                    style={{ paddingLeft: "32px" }}
                    className={`${styles.input} ${showErr("name") ? styles.inputError : ""}`}
                  />
                </div>
                {showErr("name") && <span className={`${styles.error} ${styles.errorAnimate}`}>{errors.name}</span>}
              </div>

              {/* Title */}
              <div className={styles.formGroup} style={{ marginTop: "14px" }}>
                <label className={styles.label}>Title</label>
                <input
                  name="title"
                  value={form.title ?? ""}
                  onChange={handleChange}
                  placeholder="e.g. Quality Management System"
                  className={styles.input}
                />
              </div>

            </div>

            <div className={styles.modalFooter}>
              <button type="button" onClick={onClose} className={styles.cancelBtn}>Cancel</button>
              <button type="submit" disabled={saving} className={styles.saveBtn}>
                {saving ? (isEdit ? "Updating…" : "Saving...") : (isEdit ? "Update Standard" : "Save Standard")}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}