import { useEffect, useState } from 'react';
import api from '../api/client';
import type { Sale, InvestmentPeriod, StockBag, SaleItem } from '../types';
import Modal from '../components/Modal';
import { Field, Input, Select, Textarea } from '../components/FormField';
import Badge from '../components/Badge';

const today = new Date().toISOString().slice(0, 10);
const payColor = (s: string) => s === 'paid' ? 'green' : s === 'partial' ? 'amber' : 'zinc';

export default function Sales() {
  const [sales, setSales] = useState<Sale[]>([]);
  const [periods, setPeriods] = useState<InvestmentPeriod[]>([]);
  const [availableBags, setAvailableBags] = useState<StockBag[]>([]);
  const [filterPeriod, setFilterPeriod] = useState('');
  const [showModal, setShowModal] = useState(false);
  const [editing, setEditing] = useState<Sale | null>(null);
  const [saving, setSaving] = useState(false);

  const emptyForm = () => ({
    investment_period_id: filterPeriod, buyer_type: 'person', buyer_name: '',
    buyer_contact: '', sale_type: 'full', total_amount: '', paid_amount: '0',
    payment_status: 'pending', sale_date: today, notes: '',
    items: [{ stock_bag_id: '', quantity: 1, price_per_kg: '' }] as { stock_bag_id: string | number; quantity: number; price_per_kg: string | number }[],
  });
  const [form, setForm] = useState(emptyForm());

  const load = (period = filterPeriod) =>
    api.get('/sales', { params: period ? { period_id: period } : {} }).then(r => {
      setSales(r.data.sales);
      setPeriods(r.data.periods);
      setAvailableBags(r.data.available_bags);
      if (!period && r.data.periods.length > 0) {
        const active = r.data.periods.find((p: InvestmentPeriod) => p.status === 'active');
        if (active) setFilterPeriod(String(active.id));
      }
    });

  useEffect(() => { load(); }, []);
  useEffect(() => { if (periods.length > 0) load(filterPeriod); }, [filterPeriod]);

  const openCreate = () => {
    setEditing(null);
    setForm(emptyForm());
    setShowModal(true);
  };
  const openEdit = (s: Sale) => {
    setEditing(s);
    setForm({
      investment_period_id: String(s.investment_period_id),
      buyer_type: s.buyer_type, buyer_name: s.buyer_name,
      buyer_contact: s.buyer_contact ?? '', sale_type: s.sale_type,
      total_amount: String(s.total_amount), paid_amount: String(s.paid_amount),
      payment_status: s.payment_status, sale_date: s.sale_date.slice(0, 10),
      notes: s.notes ?? '',
      items: s.items?.map(i => ({ stock_bag_id: i.stock_bag_id, quantity: i.quantity, price_per_kg: i.price_per_kg })) ?? [{ stock_bag_id: '', quantity: 1, price_per_kg: '' }],
    });
    setShowModal(true);
  };

  const save = async () => {
    setSaving(true);
    try {
      const payload = {
        ...form,
        investment_period_id: Number(form.investment_period_id),
        total_amount: Number(form.total_amount),
        paid_amount: Number(form.paid_amount),
        items: form.items.map(i => ({ stock_bag_id: Number(i.stock_bag_id), quantity: Number(i.quantity), price_per_kg: Number(i.price_per_kg) })),
      };
      if (editing) await api.put(`/sales/${editing.id}`, payload);
      else await api.post('/sales', payload);
      setShowModal(false);
      load();
    } finally { setSaving(false); }
  };

  const del = async (id: number) => {
    if (!confirm('Delete this sale?')) return;
    await api.delete(`/sales/${id}`);
    load();
  };

  const set = (k: string, v: unknown) => setForm(f => ({ ...f, [k]: v }));
  const setItem = (idx: number, k: string, v: unknown) =>
    setForm(f => ({ ...f, items: f.items.map((item, i) => i === idx ? { ...item, [k]: v } : item) }));
  const addItem = () => setForm(f => ({ ...f, items: [...f.items, { stock_bag_id: '', quantity: 1, price_per_kg: '' }] }));
  const removeItem = (idx: number) => setForm(f => ({ ...f, items: f.items.filter((_, i) => i !== idx) }));

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-semibold text-gray-900">Direct Sales</h1>
          <p className="text-sm text-gray-500 mt-0.5">Sales from stock bags</p>
        </div>
        <div className="flex gap-3">
          <Select value={filterPeriod} onChange={e => setFilterPeriod(e.target.value)} className="w-40">
            <option value="">All Periods</option>
            {periods.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
          </Select>
          <button onClick={openCreate} className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-medium transition-colors">
            + New Sale
          </button>
        </div>
      </div>

      <div className="rounded-xl bg-white border border-gray-200 shadow-sm overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-gray-200">
              {['Date', 'Buyer', 'Type', 'Sale Type', 'Total', 'Paid', 'Status', 'Items', 'Actions'].map(h => (
                <th key={h} className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {sales.length === 0 && <tr><td colSpan={9} className="px-4 py-12 text-center text-gray-400">No sales yet.</td></tr>}
            {sales.map(s => (
              <tr key={s.id} className="border-b border-gray-100 hover:bg-gray-50">
                <td className="px-4 py-3 text-gray-700 whitespace-nowrap">{new Date(s.sale_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</td>
                <td className="px-4 py-3 text-gray-900 font-medium">{s.buyer_name}</td>
                <td className="px-4 py-3"><Badge color={s.buyer_type === 'company' ? 'blue' : 'zinc'}>{s.buyer_type}</Badge></td>
                <td className="px-4 py-3 text-gray-700 capitalize">{s.sale_type}</td>
                <td className="px-4 py-3 text-gray-900">PKR {Number(s.total_amount).toLocaleString()}</td>
                <td className="px-4 py-3 text-gray-700">PKR {Number(s.paid_amount).toLocaleString()}</td>
                <td className="px-4 py-3"><Badge color={payColor(s.payment_status)}>{s.payment_status}</Badge></td>
                <td className="px-4 py-3 text-gray-700">{s.items?.length ?? 0}</td>
                <td className="px-4 py-3">
                  <div className="flex gap-1.5">
                    <button onClick={() => openEdit(s)} className="px-2 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Edit</button>
                    <button onClick={() => del(s.id)} className="px-2 py-1 rounded-md bg-red-50 hover:bg-red-100 text-red-600 text-xs">Del</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Modal open={showModal} onClose={() => setShowModal(false)} title={editing ? 'Edit Sale' : 'New Sale'} maxWidth="max-w-2xl">
        <div className="space-y-4 max-h-[70vh] overflow-y-auto pr-1">
          <div className="grid grid-cols-2 gap-4">
            <Field label="Period">
              <Select value={form.investment_period_id} onChange={e => set('investment_period_id', e.target.value)}>
                {periods.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
              </Select>
            </Field>
            <Field label="Sale Date">
              <Input type="date" value={form.sale_date} onChange={e => set('sale_date', e.target.value)} />
            </Field>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <Field label="Buyer Name">
              <Input value={form.buyer_name} onChange={e => set('buyer_name', e.target.value)} />
            </Field>
            <Field label="Buyer Contact">
              <Input value={form.buyer_contact} onChange={e => set('buyer_contact', e.target.value)} />
            </Field>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <Field label="Buyer Type">
              <Select value={form.buyer_type} onChange={e => set('buyer_type', e.target.value)}>
                <option value="person">Person</option>
                <option value="company">Company</option>
              </Select>
            </Field>
            <Field label="Sale Type">
              <Select value={form.sale_type} onChange={e => set('sale_type', e.target.value)}>
                <option value="full">Full</option>
                <option value="partial">Partial</option>
              </Select>
            </Field>
          </div>
          <div className="grid grid-cols-3 gap-4">
            <Field label="Total (PKR)">
              <Input type="number" value={form.total_amount} onChange={e => set('total_amount', e.target.value)} />
            </Field>
            <Field label="Paid (PKR)">
              <Input type="number" value={form.paid_amount} onChange={e => set('paid_amount', e.target.value)} />
            </Field>
            <Field label="Payment Status">
              <Select value={form.payment_status} onChange={e => set('payment_status', e.target.value)}>
                <option value="pending">Pending</option>
                <option value="partial">Partial</option>
                <option value="paid">Paid</option>
              </Select>
            </Field>
          </div>

          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <p className="text-sm font-medium text-gray-700">Line Items</p>
              <button type="button" onClick={addItem} className="text-xs text-emerald-700 hover:text-emerald-300">+ Add Item</button>
            </div>
            {form.items.map((item, idx) => (
              <div key={idx} className="grid grid-cols-10 gap-2 items-end">
                <div className="col-span-4">
                  <Select value={item.stock_bag_id} onChange={e => setItem(idx, 'stock_bag_id', e.target.value)}>
                    <option value="">— Select Bag —</option>
                    {availableBags.map(b => (
                      <option key={b.id} value={b.id}>
                        {b.purchase?.supplier_name ?? `P#${b.purchase_id}`} — {b.bag_weight_kg}kg × {b.quantity}
                      </option>
                    ))}
                  </Select>
                </div>
                <div className="col-span-2">
                  <Input type="number" value={item.quantity} onChange={e => setItem(idx, 'quantity', e.target.value)} placeholder="Qty" min="1" />
                </div>
                <div className="col-span-3">
                  <Input type="number" value={item.price_per_kg} onChange={e => setItem(idx, 'price_per_kg', e.target.value)} placeholder="Price/kg" />
                </div>
                <div className="col-span-1">
                  <button type="button" onClick={() => removeItem(idx)} className="w-full py-2 rounded-lg bg-red-50 hover:bg-red-100 text-red-600 text-xs">×</button>
                </div>
              </div>
            ))}
          </div>

          <Field label="Notes">
            <Textarea value={form.notes} onChange={e => set('notes', e.target.value)} rows={2} />
          </Field>
        </div>
        <div className="flex justify-end gap-2 pt-4 mt-2 border-t border-gray-200">
          <button onClick={() => setShowModal(false)} className="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-900 text-sm">Cancel</button>
          <button onClick={save} disabled={saving} className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 disabled:opacity-60 text-white text-sm">
            {saving ? 'Saving…' : 'Save'}
          </button>
        </div>
      </Modal>
    </div>
  );
}