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

export const MasterDataPage: React.FC = () => {
  const {
    db,
    addMasterCategory,
    updateMasterCategory,
    deleteMasterCategory,
    addMasterUnit,
    updateMasterUnit,
    deleteMasterUnit,
    addMasterSize,
    updateMasterSize,
    deleteMasterSize
  } = useStore();

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

  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  // 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>>({});

  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);
      Swal.fire({ icon: 'success', title: 'Berhasil Diperbarui!', text: `Kategori "${nameInput}" telah diperbarui.`, timer: 1500, showConfirmButton: false });
    } else {
      if (categories.some(c => c.name.toLowerCase() === nameInput.trim().toLowerCase())) {
        const msg = 'Kategori ini sudah ada dalam database master!';
        setErrorMsg(msg);
        return;
      }
      addMasterCategory(nameInput, descInput);
      Swal.fire({ icon: 'success', title: 'Berhasil Ditambahkan!', text: `Kategori "${nameInput}" telah disimpan.`, timer: 1500, showConfirmButton: false });
    }
    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);
      Swal.fire({ icon: 'success', title: 'Berhasil Diperbarui!', text: `Satuan "${nameInput}" telah diperbarui.`, timer: 1500, showConfirmButton: false });
    } else {
      if (units.some(u => u.name.toLowerCase() === nameInput.trim().toLowerCase())) {
        const msg = 'Satuan ini sudah ada dalam database master!';
        setErrorMsg(msg);
        return;
      }
      addMasterUnit(nameInput, descInput);
      Swal.fire({ icon: 'success', title: 'Berhasil Ditambahkan!', text: `Satuan "${nameInput}" telah disimpan.`, timer: 1500, showConfirmButton: false });
    }
    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);
      Swal.fire({ icon: 'success', title: 'Berhasil Diperbarui!', text: `Ukuran "${nameInput}" telah diperbarui.`, timer: 1500, showConfirmButton: false });
    } else {
      if (sizes.some(s => s.name.toLowerCase() === nameInput.trim().toLowerCase())) {
        const msg = 'Ukuran ini sudah ada dalam database master!';
        setErrorMsg(msg);
        return;
      }
      addMasterSize(nameInput, descInput);
      Swal.fire({ icon: 'success', title: 'Berhasil Ditambahkan!', text: `Ukuran "${nameInput}" telah disimpan.`, timer: 1500, showConfirmButton: false });
    }
    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()))
  );

  const currentList = activeTab === 'category' ? filteredCategories : activeTab === 'unit' ? filteredUnits : filteredSizes;
  const totalPages = Math.ceil(currentList.length / pageSize);
  const paginatedList = currentList.slice((currentPage - 1) * pageSize, currentPage * pageSize);

  const handleTabChange = (tab: 'category' | 'unit' | 'size') => {
    setActiveTab(tab);
    setCurrentPage(1);
    handleResetForm();
  };

  const handleSearchChange = (val: string) => {
    setSearchTerm(val);
    setCurrentPage(1);
  };

  return (
    <div className="space-y-6">
      
      {/* Top Banner */}
      <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-2xs flex flex-col lg:flex-row lg:items-center justify-between gap-4">
        <div>
          <div className="flex items-center gap-2">
            <Database className="w-6 h-6 text-emerald-600" />
            <h2 className="text-xl font-bold text-slate-900">Kelola Master Data</h2>
          </div>
          <p className="text-xs text-slate-500 mt-1">
            Kelola kategori, satuan kemasan, dan preset ukuran barang untuk katalog toko sembako Anda.
          </p>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex border-b border-slate-200 bg-slate-50 p-1.5 rounded-2xl gap-2 overflow-x-auto">
        <button
          onClick={() => handleTabChange('category')}
          className={`flex-1 py-2.5 px-4 rounded-xl text-xs font-extrabold flex items-center justify-center gap-2 transition shrink-0 ${
            activeTab === 'category'
              ? 'bg-white text-emerald-800 shadow-2xs border border-slate-200'
              : 'text-slate-600 hover:text-slate-900'
          }`}
        >
          <Tag className="w-4 h-4 text-emerald-600" />
          Master Kategori ({categories.length})
        </button>

        <button
          onClick={() => handleTabChange('unit')}
          className={`flex-1 py-2.5 px-4 rounded-xl text-xs font-extrabold flex items-center justify-center gap-2 transition shrink-0 ${
            activeTab === 'unit'
              ? 'bg-white text-emerald-800 shadow-2xs border border-slate-200'
              : 'text-slate-600 hover:text-slate-900'
          }`}
        >
          <Scale className="w-4 h-4 text-emerald-600" />
          Master Satuan Kemasan ({units.length})
        </button>

        <button
          onClick={() => handleTabChange('size')}
          className={`flex-1 py-2.5 px-4 rounded-xl text-xs font-extrabold flex items-center justify-center gap-2 transition shrink-0 ${
            activeTab === 'size'
              ? 'bg-white text-emerald-800 shadow-2xs border border-slate-200'
              : 'text-slate-600 hover:text-slate-900'
          }`}
        >
          <Ruler className="w-4 h-4 text-emerald-600" />
          Master Preset Ukuran ({sizes.length})
        </button>
      </div>

      {/* Form Input Card */}
      <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-2xs space-y-4">
        <div className="flex items-center justify-between border-b border-slate-100 pb-3">
          <h3 className="font-bold text-sm text-slate-800 flex items-center gap-2">
            {editingId ? <Edit2 className="w-4 h-4 text-emerald-600" /> : <Plus className="w-4 h-4 text-emerald-600" />}
            {editingId
              ? `Edit Data ${activeTab === 'category' ? 'Kategori' : activeTab === 'unit' ? 'Satuan' : 'Ukuran'}`
              : `Tambah ${activeTab === 'category' ? 'Kategori' : activeTab === 'unit' ? 'Satuan' : 'Ukuran'} Baru`}
          </h3>
          {editingId && (
            <button
              onClick={handleResetForm}
              className="text-xs font-semibold text-slate-500 hover:text-slate-800 underline"
            >
              Batal Edit
            </button>
          )}
        </div>

        {errorMsg && (
          <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl 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>
        )}

        <form
          onSubmit={
            activeTab === 'category' ? handleSubmitCategory :
            activeTab === 'unit' ? handleSubmitUnit : handleSubmitSize
          }
          noValidate
          className="grid grid-cols-1 sm:grid-cols-12 gap-3"
        >
          <div className="sm:col-span-5">
            <label className="block text-xs 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 / Botol / Pack' : 'cth: 500 / Sedang / 1.5'
              }
              className={`w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold focus:ring-2 focus:ring-emerald-500 focus:bg-white ${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-xs font-bold text-slate-700 mb-1">
              Keterangan / Deskripsi (Opsional)
            </label>
            <input
              type="text"
              value={descInput}
              onChange={(e) => setDescInput(e.target.value)}
              placeholder="Deskripsi singkat..."
              className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-emerald-500 focus:bg-white"
            />
          </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.5"
            >
              {editingId ? <Check className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
              {editingId ? 'Update' : 'Simpan'}
            </button>
          </div>
        </form>
      </div>

      {/* Search & List Table Card */}
      <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-2xs space-y-4">
        
        {/* Search */}
        <div className="relative">
          <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
          <input
            type="text"
            value={searchTerm}
            onChange={(e) => handleSearchChange(e.target.value)}
            placeholder={`Cari data master ${activeTab === 'category' ? 'kategori' : activeTab === 'unit' ? 'satuan' : 'ukuran'}...`}
            className="w-full pl-10 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>

        {/* Table */}
        <div className="border border-slate-200 rounded-xl overflow-hidden">
          <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-3 w-12">#</th>
                  <th className="px-4 py-3">
                    {activeTab === 'category' ? 'Nama Kategori' : activeTab === 'unit' ? 'Nama Satuan' : 'Nilai Ukuran'}
                  </th>
                  <th className="px-4 py-3">Keterangan</th>
                  <th className="px-4 py-3 text-right w-28">Aksi</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {activeTab === 'category' && (
                  filteredCategories.length === 0 ? (
                    <tr>
                      <td colSpan={4} className="px-4 py-8 text-center text-slate-400 italic">
                        Tidak ada master kategori ditemukan.
                      </td>
                    </tr>
                  ) : (
                    (paginatedList as typeof categories).map((c, i) => (
                      <tr key={c.id} className="hover:bg-slate-50/80 transition">
                        <td className="px-4 py-3 text-slate-400 font-mono text-xs">
                          {(currentPage - 1) * pageSize + i + 1}
                        </td>
                        <td className="px-4 py-3 font-bold text-slate-900">{c.name}</td>
                        <td className="px-4 py-3 text-slate-500">{c.description || '-'}</td>
                        <td className="px-4 py-3 text-right space-x-1">
                          <button
                            onClick={() => handleStartEdit(c.id, c.name, c.description)}
                            className="p-1.5 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
                            onClick={() => {
                              Swal.fire({
                                title: 'Hapus Kategori?',
                                text: `Hapus kategori "${c.name}" dari master data?`,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#e11d48',
                                cancelButtonColor: '#64748b',
                                confirmButtonText: 'Ya, Hapus!',
                                cancelButtonText: 'Batal'
                              }).then((res) => {
                                if (res.isConfirmed) {
                                  deleteMasterCategory(c.id);
                                  Swal.fire({ icon: 'success', title: 'Terhapus!', text: `Kategori "${c.name}" telah dihapus.`, timer: 1500, showConfirmButton: false });
                                }
                              });
                            }}
                            className="p-1.5 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-8 text-center text-slate-400 italic">
                        Tidak ada master satuan ditemukan.
                      </td>
                    </tr>
                  ) : (
                    (paginatedList as typeof units).map((u, i) => (
                      <tr key={u.id} className="hover:bg-slate-50/80 transition">
                        <td className="px-4 py-3 text-slate-400 font-mono text-xs">
                          {(currentPage - 1) * pageSize + i + 1}
                        </td>
                        <td className="px-4 py-3 font-bold text-slate-900">{u.name}</td>
                        <td className="px-4 py-3 text-slate-500">{u.description || '-'}</td>
                        <td className="px-4 py-3 text-right space-x-1">
                          <button
                            onClick={() => handleStartEdit(u.id, u.name, u.description)}
                            className="p-1.5 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
                            onClick={() => {
                              Swal.fire({
                                title: 'Hapus Satuan?',
                                text: `Hapus satuan "${u.name}" dari master data?`,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#e11d48',
                                cancelButtonColor: '#64748b',
                                confirmButtonText: 'Ya, Hapus!',
                                cancelButtonText: 'Batal'
                              }).then((res) => {
                                if (res.isConfirmed) {
                                  deleteMasterUnit(u.id);
                                  Swal.fire({ icon: 'success', title: 'Terhapus!', text: `Satuan "${u.name}" telah dihapus.`, timer: 1500, showConfirmButton: false });
                                }
                              });
                            }}
                            className="p-1.5 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-8 text-center text-slate-400 italic">
                        Tidak ada master ukuran ditemukan.
                      </td>
                    </tr>
                  ) : (
                    (paginatedList as typeof sizes).map((s, i) => (
                      <tr key={s.id} className="hover:bg-slate-50/80 transition">
                        <td className="px-4 py-3 text-slate-400 font-mono text-xs">
                          {(currentPage - 1) * pageSize + i + 1}
                        </td>
                        <td className="px-4 py-3 font-bold text-slate-900">{s.name}</td>
                        <td className="px-4 py-3 text-slate-500">{s.description || '-'}</td>
                        <td className="px-4 py-3 text-right space-x-1">
                          <button
                            onClick={() => handleStartEdit(s.id, s.name, s.description)}
                            className="p-1.5 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
                            onClick={() => {
                              Swal.fire({
                                title: 'Hapus Ukuran?',
                                text: `Hapus ukuran "${s.name}" dari master data?`,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#e11d48',
                                cancelButtonColor: '#64748b',
                                confirmButtonText: 'Ya, Hapus!',
                                cancelButtonText: 'Batal'
                              }).then((res) => {
                                if (res.isConfirmed) {
                                  deleteMasterSize(s.id);
                                  Swal.fire({ icon: 'success', title: 'Terhapus!', text: `Ukuran "${s.name}" telah dihapus.`, timer: 1500, showConfirmButton: false });
                                }
                              });
                            }}
                            className="p-1.5 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>

          <PaginationControl
            currentPage={currentPage}
            totalPages={totalPages}
            pageSize={pageSize}
            totalItems={currentList.length}
            onPageChange={setCurrentPage}
            onPageSizeChange={setPageSize}
          />
        </div>

      </div>

    </div>
  );
};