import React, { useState } from 'react';
import { useStore } from '../context/StoreContext';
import { X, Plus, Trash2, Edit2, Search, Tag, Scale, Ruler, Check, AlertCircle } from 'lucide-react';
import { requiredRule, validateForm, isInvalid } from '../rules';

interface Props {
  isOpen: boolean;
  onClose: () => void;
  initialTab?: 'category' | 'unit' | 'size';
}

export const MasterDataModal: React.FC<Props> = ({ isOpen, onClose, initialTab = 'category' }) => {
  const {
    db,
    addMasterCategory,
    updateMasterCategory,
    deleteMasterCategory,
    addMasterUnit,
    updateMasterUnit,
    deleteMasterUnit,
    addMasterSize,
    updateMasterSize,
    deleteMasterSize
  } = useStore();

  const [activeTab, setActiveTab] = useState<'category' | 'unit' | 'size'>(initialTab);
  const [searchTerm, setSearchTerm] = useState('');

  // Form State
  const [editingId, setEditingId] = useState<string | null>(null);
  const [nameInput, setNameInput] = useState('');
  const [descInput, setDescInput] = useState('');
  const [errorMsg, setErrorMsg] = useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});

  if (!isOpen) return null;

  const categories = db.categories || [];
  const units = db.units || [];
  const sizes = db.sizes || [];

  const handleResetForm = () => {
    setEditingId(null);
    setNameInput('');
    setDescInput('');
    setErrorMsg(null);
    setFieldErrors({});
  };

  const handleStartEdit = (id: string, currentName: string, currentDesc?: string) => {
    setEditingId(id);
    setNameInput(currentName);
    setDescInput(currentDesc || '');
    setErrorMsg(null);
    setFieldErrors({});
  };

  const handleSubmitCategory = (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMsg(null);

    const { isValid, errors } = validateForm(
      { nameInput },
      { nameInput: [requiredRule('Nama kategori tidak boleh kosong!')] }
    );

    if (!isValid) {
      setFieldErrors(errors as Record<string, string>);
      return;
    }

    setFieldErrors({});

    if (editingId) {
      updateMasterCategory(editingId, nameInput, descInput);
    } else {
      if (categories.some(c => c.name.toLowerCase() === nameInput.trim().toLowerCase())) {
        setErrorMsg('Kategori ini sudah ada dalam database master!');
        return;
      }
      addMasterCategory(nameInput, descInput);
    }
    handleResetForm();
  };

  const handleSubmitUnit = (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMsg(null);

    const { isValid, errors } = validateForm(
      { nameInput },
      { nameInput: [requiredRule('Nama satuan tidak boleh kosong!')] }
    );

    if (!isValid) {
      setFieldErrors(errors as Record<string, string>);
      return;
    }

    setFieldErrors({});

    if (editingId) {
      updateMasterUnit(editingId, nameInput, descInput);
    } else {
      if (units.some(u => u.name.toLowerCase() === nameInput.trim().toLowerCase())) {
        setErrorMsg('Satuan ini sudah ada dalam database master!');
        return;
      }
      addMasterUnit(nameInput, descInput);
    }
    handleResetForm();
  };

  const handleSubmitSize = (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMsg(null);

    const { isValid, errors } = validateForm(
      { nameInput },
      { nameInput: [requiredRule('Nilai ukuran tidak boleh kosong!')] }
    );

    if (!isValid) {
      setFieldErrors(errors as Record<string, string>);
      return;
    }

    setFieldErrors({});

    if (editingId) {
      updateMasterSize(editingId, nameInput, descInput);
    } else {
      if (sizes.some(s => s.name.toLowerCase() === nameInput.trim().toLowerCase())) {
        setErrorMsg('Ukuran ini sudah ada dalam database master!');
        return;
      }
      addMasterSize(nameInput, descInput);
    }
    handleResetForm();
  };

  const filteredCategories = categories.filter(c =>
    c.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    (c.description && c.description.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  const filteredUnits = units.filter(u =>
    u.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    (u.description && u.description.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  const filteredSizes = sizes.filter(s =>
    s.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    (s.description && s.description.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 backdrop-blur-sm p-3 overflow-y-auto">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-3xl border border-slate-100 my-auto flex flex-col max-h-[90vh] overflow-hidden">
        
        {/* Header */}
        <div className="bg-gradient-to-r from-emerald-600 to-teal-700 text-white p-4 flex items-center justify-between shrink-0">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-white/20 rounded-xl">
              <Tag className="w-5 h-5 text-white" />
            </div>
            <div>
              <h3 className="font-bold text-base sm:text-lg">Kelola Master Data Sembako</h3>
              <p className="text-emerald-100 text-xs">Tambah & sesuaikan Kategori, Satuan, dan Ukuran barang</p>
            </div>
          </div>
          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-white/20 text-white transition">
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Category Tabs */}
        <div className="flex border-b border-slate-200 bg-slate-50 px-4 pt-3 shrink-0 gap-2 overflow-x-auto">
          <button
            type="button"
            onClick={() => { setActiveTab('category'); handleResetForm(); }}
            className={`px-4 py-2.5 text-xs font-bold rounded-t-xl flex items-center gap-2 border-b-2 transition shrink-0 ${
              activeTab === 'category'
                ? 'bg-white border-emerald-600 text-emerald-800 shadow-2xs'
                : 'border-transparent text-slate-600 hover:text-slate-900'
            }`}
          >
            <Tag className="w-4 h-4" /> Kategori ({categories.length})
          </button>
          <button
            type="button"
            onClick={() => { setActiveTab('unit'); handleResetForm(); }}
            className={`px-4 py-2.5 text-xs font-bold rounded-t-xl flex items-center gap-2 border-b-2 transition shrink-0 ${
              activeTab === 'unit'
                ? 'bg-white border-emerald-600 text-emerald-800 shadow-2xs'
                : 'border-transparent text-slate-600 hover:text-slate-900'
            }`}
          >
            <Scale className="w-4 h-4" /> Satuan Kemasan ({units.length})
          </button>
          <button
            type="button"
            onClick={() => { setActiveTab('size'); handleResetForm(); }}
            className={`px-4 py-2.5 text-xs font-bold rounded-t-xl flex items-center gap-2 border-b-2 transition shrink-0 ${
              activeTab === 'size'
                ? 'bg-white border-emerald-600 text-emerald-800 shadow-2xs'
                : 'border-transparent text-slate-600 hover:text-slate-900'
            }`}
          >
            <Ruler className="w-4 h-4" /> Preset Ukuran ({sizes.length})
          </button>
        </div>

        {/* Content Body */}
        <div className="p-4 sm:p-6 overflow-y-auto space-y-5 flex-1">
          
          {/* Add / Edit Input Form */}
          <form
            onSubmit={
              activeTab === 'category' ? handleSubmitCategory :
              activeTab === 'unit' ? handleSubmitUnit : handleSubmitSize
            }
            noValidate
            className="bg-emerald-50/60 border border-emerald-200/80 p-3.5 sm:p-4 rounded-xl space-y-3"
          >
            <div className="flex items-center justify-between">
              <h4 className="text-xs font-bold text-emerald-900 flex items-center gap-1.5">
                {editingId ? <Edit2 className="w-3.5 h-3.5 text-emerald-700" /> : <Plus className="w-3.5 h-3.5 text-emerald-700" />}
                {editingId ? `Edit Master ${activeTab === 'category' ? 'Kategori' : activeTab === 'unit' ? 'Satuan' : 'Ukuran'}` : `Tambah Master ${activeTab === 'category' ? 'Kategori' : activeTab === 'unit' ? 'Satuan' : 'Ukuran'} Baru`}
              </h4>
              {editingId && (
                <button
                  type="button"
                  onClick={handleResetForm}
                  className="text-[11px] font-semibold text-slate-500 hover:text-slate-800 underline"
                >
                  Batal Edit
                </button>
              )}
            </div>

            {errorMsg && (
              <div className="p-2.5 bg-rose-50 border border-rose-200 rounded-lg text-rose-800 text-xs flex items-center gap-2">
                <AlertCircle className="w-4 h-4 text-rose-600 shrink-0" />
                <span>{errorMsg}</span>
              </div>
            )}

            <div className="grid grid-cols-1 sm:grid-cols-12 gap-3">
              <div className="sm:col-span-5">
                <label className="block text-[11px] font-bold text-slate-700 mb-1">
                  Nama / Label <span className="text-rose-500">*</span>
                </label>
                <input
                  type="text"
                  value={nameInput}
                  onChange={(e) => {
                    setNameInput(e.target.value);
                    if (fieldErrors.nameInput) setFieldErrors(prev => ({ ...prev, nameInput: '' }));
                  }}
                  placeholder={
                    activeTab === 'category' ? 'cth: Snacks & Biskuit' :
                    activeTab === 'unit' ? 'cth: Karton / Pcs / Botol' : 'cth: 500 / Sedang / 1.5'
                  }
                  className={`w-full px-3 py-1.5 bg-white border border-slate-200 rounded-xl text-xs font-semibold focus:ring-2 focus:ring-emerald-500 ${isInvalid(fieldErrors.nameInput)}`}
                />
                {fieldErrors.nameInput && (
                  <span className="invalid-feedback">
                    <AlertCircle className="w-3 h-3" /> {fieldErrors.nameInput}
                  </span>
                )}
              </div>

              <div className="sm:col-span-5">
                <label className="block text-[11px] font-bold text-slate-700 mb-1">
                  Keterangan / Deskripsi (Opsional)
                </label>
                <input
                  type="text"
                  value={descInput}
                  onChange={(e) => setDescInput(e.target.value)}
                  placeholder="Keterangan singkat..."
                  className="w-full px-3 py-1.5 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-emerald-500"
                />
              </div>

              <div className="sm:col-span-2 flex items-end">
                <button
                  type="submit"
                  className="w-full py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl shadow-xs transition flex items-center justify-center gap-1"
                >
                  {editingId ? <Check className="w-3.5 h-3.5" /> : <Plus className="w-3.5 h-3.5" />}
                  {editingId ? 'Update' : 'Simpan'}
                </button>
              </div>
            </div>
          </form>

          {/* Search Filter */}
          <div className="relative">
            <Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder={`Cari master ${activeTab === 'category' ? 'kategori' : activeTab === 'unit' ? 'satuan' : 'ukuran'}...`}
              className="w-full pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium focus:ring-2 focus:ring-emerald-500 focus:bg-white"
            />
          </div>

          {/* Master List Table */}
          <div className="border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-2xs">
            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs">
                <thead className="bg-slate-100/80 text-slate-700 font-bold border-b border-slate-200">
                  <tr>
                    <th className="px-4 py-2.5 w-12">#</th>
                    <th className="px-4 py-2.5">
                      {activeTab === 'category' ? 'Nama Kategori' : activeTab === 'unit' ? 'Nama Satuan' : 'Nilai Ukuran'}
                    </th>
                    <th className="px-4 py-2.5">Keterangan</th>
                    <th className="px-4 py-2.5 text-right w-24">Aksi</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {activeTab === 'category' && (
                    filteredCategories.length === 0 ? (
                      <tr>
                        <td colSpan={4} className="px-4 py-6 text-center text-slate-400 italic">
                          Tidak ada master kategori ditemukan.
                        </td>
                      </tr>
                    ) : (
                      filteredCategories.map((c, i) => (
                        <tr key={c.id} className="hover:bg-slate-50/80 transition">
                          <td className="px-4 py-2.5 text-slate-400 font-mono text-[11px]">{i + 1}</td>
                          <td className="px-4 py-2.5 font-bold text-slate-900">{c.name}</td>
                          <td className="px-4 py-2.5 text-slate-500">{c.description || '-'}</td>
                          <td className="px-4 py-2.5 text-right space-x-1">
                            <button
                              type="button"
                              onClick={() => handleStartEdit(c.id, c.name, c.description)}
                              className="p-1 text-slate-600 hover:text-emerald-700 hover:bg-emerald-50 rounded-lg transition"
                              title="Edit Kategori"
                            >
                              <Edit2 className="w-3.5 h-3.5" />
                            </button>
                            <button
                              type="button"
                              onClick={() => {
                                if (confirm(`Hapus kategori "${c.name}" dari master data?`)) {
                                  deleteMasterCategory(c.id);
                                }
                              }}
                              className="p-1 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition"
                              title="Hapus Kategori"
                            >
                              <Trash2 className="w-3.5 h-3.5" />
                            </button>
                          </td>
                        </tr>
                      ))
                    )
                  )}

                  {activeTab === 'unit' && (
                    filteredUnits.length === 0 ? (
                      <tr>
                        <td colSpan={4} className="px-4 py-6 text-center text-slate-400 italic">
                          Tidak ada master satuan ditemukan.
                        </td>
                      </tr>
                    ) : (
                      filteredUnits.map((u, i) => (
                        <tr key={u.id} className="hover:bg-slate-50/80 transition">
                          <td className="px-4 py-2.5 text-slate-400 font-mono text-[11px]">{i + 1}</td>
                          <td className="px-4 py-2.5 font-bold text-slate-900">{u.name}</td>
                          <td className="px-4 py-2.5 text-slate-500">{u.description || '-'}</td>
                          <td className="px-4 py-2.5 text-right space-x-1">
                            <button
                              type="button"
                              onClick={() => handleStartEdit(u.id, u.name, u.description)}
                              className="p-1 text-slate-600 hover:text-emerald-700 hover:bg-emerald-50 rounded-lg transition"
                              title="Edit Satuan"
                            >
                              <Edit2 className="w-3.5 h-3.5" />
                            </button>
                            <button
                              type="button"
                              onClick={() => {
                                if (confirm(`Hapus satuan "${u.name}" dari master data?`)) {
                                  deleteMasterUnit(u.id);
                                }
                              }}
                              className="p-1 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition"
                              title="Hapus Satuan"
                            >
                              <Trash2 className="w-3.5 h-3.5" />
                            </button>
                          </td>
                        </tr>
                      ))
                    )
                  )}

                  {activeTab === 'size' && (
                    filteredSizes.length === 0 ? (
                      <tr>
                        <td colSpan={4} className="px-4 py-6 text-center text-slate-400 italic">
                          Tidak ada master ukuran ditemukan.
                        </td>
                      </tr>
                    ) : (
                      filteredSizes.map((s, i) => (
                        <tr key={s.id} className="hover:bg-slate-50/80 transition">
                          <td className="px-4 py-2.5 text-slate-400 font-mono text-[11px]">{i + 1}</td>
                          <td className="px-4 py-2.5 font-bold text-slate-900">{s.name}</td>
                          <td className="px-4 py-2.5 text-slate-500">{s.description || '-'}</td>
                          <td className="px-4 py-2.5 text-right space-x-1">
                            <button
                              type="button"
                              onClick={() => handleStartEdit(s.id, s.name, s.description)}
                              className="p-1 text-slate-600 hover:text-emerald-700 hover:bg-emerald-50 rounded-lg transition"
                              title="Edit Ukuran"
                            >
                              <Edit2 className="w-3.5 h-3.5" />
                            </button>
                            <button
                              type="button"
                              onClick={() => {
                                if (confirm(`Hapus ukuran "${s.name}" dari master data?`)) {
                                  deleteMasterSize(s.id);
                                }
                              }}
                              className="p-1 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition"
                              title="Hapus Ukuran"
                            >
                              <Trash2 className="w-3.5 h-3.5" />
                            </button>
                          </td>
                        </tr>
                      ))
                    )
                  )}
                </tbody>
              </table>
            </div>
          </div>

        </div>

        {/* Footer */}
        <div className="p-3.5 border-t border-slate-200 bg-slate-50 flex items-center justify-between shrink-0 text-xs">
          <span className="text-slate-500 font-medium">
            Master data ini dipakai untuk pilihan dropdown search pada menu Kelola Barang & Transaksi.
          </span>
          <button
            type="button"
            onClick={onClose}
            className="px-4 py-2 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition shadow-xs"
          >
            Selesai
          </button>
        </div>

      </div>
    </div>
  );
};