import { useEffect, useState } from 'react';
import api from '../../api/client';
import type { ItemType, ItemTypeVariant } from '../../types';

export default function ItemTypes() {
  const [tab, setTab] = useState<'items' | 'variants'>('items');
  const [items, setItems] = useState<ItemType[]>([]);

  // Item type state
  const [newName, setNewName] = useState('');
  const [newProcessingType, setNewProcessingType] = useState<'direct' | 'factory' | 'output'>('direct');
  const [editingId, setEditingId] = useState<number | null>(null);
  const [editName, setEditName] = useState('');
  const [editProcessingType, setEditProcessingType] = useState<'direct' | 'factory' | 'output'>('direct');
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');

  // Variant state
  const [newVarTypeId, setNewVarTypeId] = useState('');
  const [newVarWeight, setNewVarWeight] = useState('');
  const [editingVarId, setEditingVarId] = useState<number | null>(null);
  const [editVarWeight, setEditVarWeight] = useState('');
  const [varSaving, setVarSaving] = useState(false);
  const [varError, setVarError] = useState('');

  const load = () => api.get('/settings/item-types').then(r => setItems(r.data));
  useEffect(() => { load(); }, []);

  const allVariants: (ItemTypeVariant & { itemTypeName: string })[] = items.flatMap(t =>
    (t.variants ?? []).map(v => ({ ...v, itemTypeName: t.name }))
  );

  // ── Item type CRUD ─────────────────────────────
  const addItem = async () => {
    if (!newName.trim()) { setError('Name is required'); return; }
    setSaving(true); setError('');
    try {
      await api.post('/settings/item-types', { name: newName.trim(), processing_type: newProcessingType });
      setNewName(''); setNewProcessingType('direct'); load();
    } catch (e: any) {
      setError(e.response?.data?.errors?.name?.[0] ?? 'Failed to add');
    } finally { setSaving(false); }
  };

  const saveEditItem = async (id: number) => {
    if (!editName.trim()) return;
    setSaving(true); setError('');
    try {
      await api.put(`/settings/item-types/${id}`, { name: editName.trim(), processing_type: editProcessingType });
      setEditingId(null); load();
    } catch (e: any) {
      setError(e.response?.data?.errors?.name?.[0] ?? 'Failed to save');
    } finally { setSaving(false); }
  };

  const delItem = async (id: number) => {
    if (!confirm('Delete this item type and all its variants?')) return;
    await api.delete(`/settings/item-types/${id}`); load();
  };

  // ── Variant CRUD ───────────────────────────────
  const addVariant = async () => {
    if (!newVarTypeId) { setVarError('Select an item type'); return; }
    if (!newVarWeight || Number(newVarWeight) <= 0) { setVarError('Enter bag weight'); return; }
    setVarSaving(true); setVarError('');
    try {
      await api.post(`/settings/item-types/${newVarTypeId}/variants`, {
        bag_weight_kg: Number(newVarWeight),
      });
      setNewVarWeight(''); load();
    } catch {
      setVarError('Failed to add');
    } finally { setVarSaving(false); }
  };

  const saveEditVar = async (id: number) => {
    if (!editVarWeight) return;
    setVarSaving(true);
    try {
      await api.put(`/settings/item-type-variants/${id}`, {
        bag_weight_kg: Number(editVarWeight),
      });
      setEditingVarId(null); load();
    } finally { setVarSaving(false); }
  };

  const delVariant = async (id: number) => {
    if (!confirm('Delete this variant?')) return;
    await api.delete(`/settings/item-type-variants/${id}`); load();
  };

  const inputCls = 'px-3 py-2 rounded-lg bg-gray-100 border border-gray-300 text-gray-900 text-sm outline-none focus:border-emerald-500 placeholder:text-gray-400';

  return (
    <div className="space-y-6 max-w-lg">
      <div>
        <h1 className="text-xl font-semibold text-gray-900">Item Types & Variants</h1>
        <p className="text-sm text-gray-500 mt-0.5">Manage items and bag size variants</p>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 p-1 bg-gray-100 rounded-lg w-fit">
        {(['items', 'variants'] as const).map(t => (
          <button key={t} onClick={() => setTab(t)}
            className={`px-5 py-1.5 rounded-md text-sm font-medium transition-colors ${tab === t ? 'bg-emerald-600 text-white' : 'text-gray-500 hover:text-gray-900'}`}>
            {t === 'items' ? 'Item Types' : 'Variants'}
          </button>
        ))}
      </div>

      {/* ── Item Types tab ─────────────────────────── */}
      {tab === 'items' && (
        <>
          <div className="space-y-2">
            <div className="flex gap-2">
              <input
                value={newName}
                onChange={e => { setNewName(e.target.value); setError(''); }}
                onKeyDown={e => e.key === 'Enter' && addItem()}
                placeholder="e.g. Gandum, Chawal"
                className={`flex-1 ${inputCls}`}
              />
              <button onClick={addItem} disabled={saving}
                className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 disabled:opacity-60 text-white text-sm font-medium whitespace-nowrap">
                {saving ? 'Adding…' : '+ Add'}
              </button>
            </div>
            <div className="flex gap-1 p-1 bg-gray-100 rounded-lg w-fit">
              {(['direct', 'factory', 'output'] as const).map(pt => (
                <button key={pt} onClick={() => setNewProcessingType(pt)}
                  className={`px-4 py-1 rounded-md text-xs font-medium transition-colors ${newProcessingType === pt ? (pt === 'factory' ? 'bg-purple-100 text-purple-800' : pt === 'output' ? 'bg-emerald-100 text-emerald-800' : 'bg-gray-300 text-gray-900') : 'text-gray-500 hover:text-gray-900'}`}>
                  {pt === 'factory' ? 'Factory Input' : pt === 'output' ? 'Factory Output' : 'Direct Sale'}
                </button>
              ))}
            </div>
          </div>
          {error && <p className="text-sm text-red-600">{error}</p>}

          <div className="rounded-xl bg-white border border-gray-200 shadow-sm divide-y divide-gray-100">
            {items.length === 0 && (
              <p className="px-4 py-8 text-center text-gray-400 text-sm">No item types yet.</p>
            )}
            {items.map(item => (
              <div key={item.id} className="px-4 py-3">
                {editingId === item.id ? (
                  <div className="space-y-2">
                    <input value={editName} onChange={e => setEditName(e.target.value)}
                      onKeyDown={e => { if (e.key === 'Enter') saveEditItem(item.id); if (e.key === 'Escape') setEditingId(null); }}
                      className={`w-full ${inputCls}`} autoFocus />
                    <div className="flex items-center justify-between gap-3">
                      <div className="flex gap-1 p-1 bg-gray-100 rounded-lg">
                        {(['direct', 'factory', 'output'] as const).map(pt => (
                          <button key={pt} onClick={() => setEditProcessingType(pt)}
                            className={`px-3 py-1 rounded-md text-xs font-medium transition-colors ${editProcessingType === pt ? (pt === 'factory' ? 'bg-purple-100 text-purple-800' : pt === 'output' ? 'bg-emerald-100 text-emerald-800' : 'bg-gray-300 text-gray-900') : 'text-gray-500 hover:text-gray-900'}`}>
                            {pt === 'factory' ? 'Factory Input' : pt === 'output' ? 'Factory Output' : 'Direct Sale'}
                          </button>
                        ))}
                      </div>
                      <div className="flex gap-2">
                        <button onClick={() => saveEditItem(item.id)} disabled={saving}
                          className="px-3 py-1.5 rounded-md bg-emerald-600 hover:bg-emerald-500 text-white text-xs">Save</button>
                        <button onClick={() => setEditingId(null)}
                          className="px-3 py-1.5 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Cancel</button>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="flex items-center gap-3">
                    <div className="flex-1 min-w-0">
                      <span className="text-gray-900 text-sm">{item.name}</span>
                      <span className={`ml-2 text-xs px-1.5 py-0.5 rounded ${
                        item.processing_type === 'factory' ? 'bg-purple-100 text-purple-700' :
                        item.processing_type === 'output' ? 'bg-emerald-100 text-emerald-700' :
                        'bg-gray-200 text-gray-500'}`}>
                        {item.processing_type === 'factory' ? 'Factory Input' : item.processing_type === 'output' ? 'Factory Output' : 'Direct'}
                      </span>
                    </div>
                    <span className="text-xs text-gray-400">{item.variants?.length ?? 0} variant{(item.variants?.length ?? 0) !== 1 ? 's' : ''}</span>
                    <button onClick={() => { setEditingId(item.id); setEditName(item.name); setEditProcessingType((item.processing_type ?? 'direct') as 'direct' | 'factory' | 'output'); setError(''); }}
                      className="px-2 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Edit</button>
                    <button onClick={() => delItem(item.id)}
                      className="px-2 py-1 rounded-md bg-red-50 hover:bg-red-100 text-red-600 text-xs">Del</button>
                  </div>
                )}
              </div>
            ))}
          </div>
        </>
      )}

      {/* ── Variants tab ───────────────────────────── */}
      {tab === 'variants' && (
        <>
          <div className="rounded-xl bg-white border border-gray-200 shadow-sm p-4 space-y-3">
            <p className="text-sm font-medium text-gray-700">Add Variant</p>
            <div className="flex gap-2">
              <select
                value={newVarTypeId}
                onChange={e => { setNewVarTypeId(e.target.value); setVarError(''); }}
                className={`flex-1 ${inputCls}`}
              >
                <option value="">— Select item type —</option>
                {items.map(t => (
                  <option key={t.id} value={String(t.id)}>{t.name}</option>
                ))}
              </select>
              <input
                type="number"
                value={newVarWeight}
                onChange={e => { setNewVarWeight(e.target.value); setVarError(''); }}
                placeholder="kg / bag"
                step="0.001" min="0.001"
                className={`w-32 ${inputCls}`}
              />
              <button onClick={addVariant} disabled={varSaving}
                className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 disabled:opacity-60 text-white text-sm font-medium whitespace-nowrap">
                {varSaving ? 'Adding…' : '+ Add'}
              </button>
            </div>
            {varError && <p className="text-sm text-red-600">{varError}</p>}
          </div>

          <div className="rounded-xl bg-white border border-gray-200 shadow-sm divide-y divide-gray-100">
            {allVariants.length === 0 && (
              <p className="px-4 py-8 text-center text-gray-400 text-sm">No variants yet.</p>
            )}
            {allVariants.map(v => (
              <div key={v.id} className="flex items-center gap-3 px-4 py-3">
                {editingVarId === v.id ? (
                  <>
                    <span className="flex-1 text-gray-500 text-sm">{v.itemTypeName}</span>
                    <input
                      type="number"
                      value={editVarWeight}
                      onChange={e => setEditVarWeight(e.target.value)}
                      placeholder="kg/bag"
                      step="0.001" min="0.001"
                      className={`w-32 ${inputCls}`}
                      autoFocus
                    />
                    <button onClick={() => saveEditVar(v.id)} disabled={varSaving}
                      className="px-3 py-1.5 rounded-md bg-emerald-600 hover:bg-emerald-500 text-white text-xs">Save</button>
                    <button onClick={() => setEditingVarId(null)}
                      className="px-3 py-1.5 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Cancel</button>
                  </>
                ) : (
                  <>
                    <span className="flex-1 text-gray-900 text-sm">{v.itemTypeName}</span>
                    <span className="text-gray-700 text-sm whitespace-nowrap">{Number(v.bag_weight_kg).toLocaleString()} kg / bag</span>
                    <button onClick={() => { setEditingVarId(v.id); setEditVarWeight(String(v.bag_weight_kg)); }}
                      className="px-2 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Edit</button>
                    <button onClick={() => delVariant(v.id)}
                      className="px-2 py-1 rounded-md bg-red-50 hover:bg-red-100 text-red-600 text-xs">Del</button>
                  </>
                )}
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}