import React, { useEffect, useState } from 'react';
import Modal from '../ui/Modal';
import SearchableSelect from '../ui/SearchableSelect';
import { rialToToman, tomanToRial, toEnglishDigits } from '../../lib/utils';
import type { InventoryItem, InventoryMeta, ItemPayload } from '../../hooks/useInventory';

interface Props {
  open: boolean;
  editing: InventoryItem | null;
  meta: InventoryMeta;
  saving: boolean;
  onClose: () => void;
  onSave: (payload: ItemPayload, uuid?: string) => void;
}

interface FormState {
  name: string;
  consumable: string;
  category: string;
  unit: string;
  price: string;   // Toman, as typed
  stock: string;
  alertThreshold: string;
}

const DEFAULT_UNIT = 'عدد';
const BLANK: FormState = { name: '', consumable: '', category: '', unit: DEFAULT_UNIT, price: '', stock: '', alertThreshold: '' };

const digits = (v: string) => toEnglishDigits(v).replace(/\D/g, '');
// group thousands: "1200000" → "1,200,000"
const group = (v: string) => v.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

/** «افزودن/ویرایش کالای جدید» — واحد و دسته‌بندی از لیست استاندارد Backend. */
export default function AddItemModal({ open, editing, meta, saving, onClose, onSave }: Props) {
  const [form, setForm] = useState<FormState>(BLANK);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!open) return;
    setError('');
    setForm(editing
      ? {
          name: editing.name,
          consumable: editing.consumable ?? '',
          category: editing.category ?? '',
          unit: editing.unit || DEFAULT_UNIT,
          price: editing.price ? String(rialToToman(editing.price)) : '',
          stock: String(editing.stock),
          alertThreshold: String(editing.alertThreshold),
        }
      : BLANK);
  }, [open, editing]);

  const set = (k: keyof FormState) => (e: React.ChangeEvent<HTMLInputElement>) =>
    setForm((f) => ({ ...f, [k]: e.target.value }));
  const setNum = (k: keyof FormState) => (e: React.ChangeEvent<HTMLInputElement>) =>
    setForm((f) => ({ ...f, [k]: digits(e.target.value) }));
  const setSelect = (k: keyof FormState) => (v: string | number | null) =>
    setForm((f) => ({ ...f, [k]: v == null ? '' : String(v) }));

  const submit = () => {
    if (form.name.trim() === '') { setError('نام کالا الزامی است'); return; }
    if (form.category === '') { setError('دسته‌بندی کالا الزامی است'); return; }
    const payload: ItemPayload = {
      name: form.name.trim(),
      consumable: form.consumable.trim() || null,
      category: form.category,
      unit: form.unit || DEFAULT_UNIT,
      price: form.price ? tomanToRial(Number(form.price)) : 0,
      stock: form.stock ? Number(form.stock) : 0,
      alertThreshold: form.alertThreshold ? Number(form.alertThreshold) : 0,
    };
    onSave(payload, editing?.uuid);
  };

  const inputs: { key: keyof FormState; label: string; placeholder: string; numeric?: boolean }[] = [
    { key: 'name', label: 'نام کالا', placeholder: 'نام کالا' },
    { key: 'consumable', label: 'مصرفی', placeholder: 'مصرفی' },
    { key: 'price', label: 'قیمت (تومان)', placeholder: 'قیمت', numeric: true },
    { key: 'stock', label: 'موجودی', placeholder: 'موجودی', numeric: true },
    { key: 'alertThreshold', label: 'هشدار اتمام', placeholder: 'هشدار اتمام', numeric: true },
  ];

  const toOptions = (list: string[]) => list.map((v) => ({ value: v, label: v }));

  return (
    <Modal open={open} onClose={onClose} title={editing ? 'ویرایش کالا' : 'افزودن کالای جدید'} size="lg">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <div>
          <label className="field-label">نام کالا</label>
          <div className="field">
            <input value={form.name} onChange={set('name')} placeholder="نام کالا" autoFocus />
          </div>
        </div>

        <div>
          <label className="field-label">دسته‌بندی</label>
          <SearchableSelect
            options={toOptions(meta.categories)}
            value={form.category || null}
            onChange={setSelect('category')}
            placeholder="انتخاب دسته‌بندی"
          />
        </div>

        <div>
          <label className="field-label">واحد</label>
          <SearchableSelect
            options={toOptions(meta.units)}
            value={form.unit || DEFAULT_UNIT}
            onChange={setSelect('unit')}
            placeholder="انتخاب واحد"
          />
        </div>

        {inputs.filter((f) => f.key !== 'name').map((f) => (
          <div key={f.key}>
            <label className="field-label">{f.label}</label>
            <div className="field">
              <input
                value={f.key === 'price' ? group(form.price) : form[f.key]}
                onChange={f.numeric ? setNum(f.key) : set(f.key)}
                placeholder={f.placeholder}
                inputMode={f.numeric ? 'numeric' : undefined}
              />
            </div>
          </div>
        ))}
        {error && <span className="field-error">{error}</span>}
        <button
          className="btn primary"
          style={{ width: '100%', justifyContent: 'center', height: 46 }}
          onClick={submit}
          disabled={saving}
        >
          {editing ? 'ذخیره تغییرات' : 'اضافه کردن کالا'}
        </button>
      </div>
    </Modal>
  );
}