import { useEffect, useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import api from '../api/client';
import type { Factory, FactoryOutput, FactorySale } 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 FactoryOutputs() {
  const { id } = useParams<{ id: string }>();
  const [factory, setFactory] = useState<Factory | null>(null);
  const [loading, setLoading] = useState(true);

  const [showOutputModal, setShowOutputModal] = useState(false);
  const [showSaleModal, setShowSaleModal] = useState(false);
  const [editingOutput, setEditingOutput] = useState<FactoryOutput | null>(null);
  const [editingSale, setEditingSale] = useState<FactorySale | null>(null);
  const [saleOutputId, setSaleOutputId] = useState<number | null>(null);
  const [saving, setSaving] = useState(false);

  const emptyOutput = { category_name: '', quality_grade: '1', weight_kg: '', bag_count: '0', bag_weight_kg: '', notes: '' };
  const emptySale = { buyer_name: '', buyer_type: 'person', sale_type: 'full', weight_sold_kg: '', price_per_kg: '', total_amount: '', paid_amount: '0', payment_status: 'pending', sale_date: today, buyer_contact: '', notes: '' };
  const [outForm, setOutForm] = useState({ ...emptyOutput });
  const [saleForm, setSaleForm] = useState({ ...emptySale });

  const load = () =>
    api.get(`/factories/${id}/outputs`).then(r => setFactory(r.data)).finally(() => setLoading(false));

  useEffect(() => { load(); }, [id]);

  const openOutputCreate = () => { setEditingOutput(null); setOutForm({ ...emptyOutput }); setShowOutputModal(true); };
  const openOutputEdit = (o: FactoryOutput) => {
    setEditingOutput(o);
    setOutForm({ category_name: o.category_name, quality_grade: String(o.quality_grade), weight_kg: String(o.weight_kg), bag_count: String(o.bag_count), bag_weight_kg: o.bag_weight_kg ? String(o.bag_weight_kg) : '', notes: o.notes ?? '' });
    setShowOutputModal(true);
  };
  const saveOutput = async () => {
    setSaving(true);
    try {
      const payload = { ...outForm, quality_grade: Number(outForm.quality_grade), weight_kg: Number(outForm.weight_kg), bag_count: Number(outForm.bag_count), bag_weight_kg: outForm.bag_weight_kg ? Number(outForm.bag_weight_kg) : null };
      if (editingOutput) await api.put(`/factories/${id}/outputs/${editingOutput.id}`, payload);
      else await api.post(`/factories/${id}/outputs`, payload);
      setShowOutputModal(false); load();
    } finally { setSaving(false); }
  };
  const delOutput = async (oid: number) => {
    if (!confirm('Delete this output?')) return;
    await api.delete(`/factories/${id}/outputs/${oid}`);
    load();
  };

  const openSaleCreate = (outputId: number) => {
    setSaleOutputId(outputId); setEditingSale(null);
    setSaleForm({ ...emptySale }); setShowSaleModal(true);
  };
  const openSaleEdit = (sale: FactorySale, outputId: number) => {
    setEditingSale(sale); setSaleOutputId(outputId);
    setSaleForm({ buyer_name: sale.buyer_name, buyer_type: sale.buyer_type, sale_type: sale.sale_type, weight_sold_kg: String(sale.weight_sold_kg), price_per_kg: String(sale.price_per_kg), total_amount: String(sale.total_amount), paid_amount: String(sale.paid_amount), payment_status: sale.payment_status, sale_date: sale.sale_date.slice(0, 10), buyer_contact: sale.buyer_contact ?? '', notes: sale.notes ?? '' });
    setShowSaleModal(true);
  };
  const saveSale = async () => {
    setSaving(true);
    try {
      const payload = { ...saleForm, weight_sold_kg: Number(saleForm.weight_sold_kg), price_per_kg: Number(saleForm.price_per_kg), total_amount: Number(saleForm.total_amount), paid_amount: Number(saleForm.paid_amount) };
      if (editingSale) await api.put(`/factory-outputs/${saleOutputId}/sales/${editingSale.id}`, payload);
      else await api.post(`/factory-outputs/${saleOutputId}/sales`, payload);
      setShowSaleModal(false); load();
    } finally { setSaving(false); }
  };
  const delSale = async (outputId: number, saleId: number) => {
    if (!confirm('Delete this sale?')) return;
    await api.delete(`/factory-outputs/${outputId}/sales/${saleId}`);
    load();
  };

  const setOut = (k: string, v: string) => setOutForm(f => ({ ...f, [k]: v }));
  const setSale = (k: string, v: string) => setSaleForm(f => ({ ...f, [k]: v }));

  if (loading) return <div className="flex items-center justify-center h-64"><div className="text-gray-500">Loading…</div></div>;
  if (!factory) return <div className="text-gray-500">Factory not found.</div>;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <div className="flex items-center gap-2 text-sm text-gray-500 mb-1">
            <Link to="/factories" className="hover:text-gray-900">Factory</Link>
            <span>/</span>
            <span className="text-gray-900">{factory.factory_name}</span>
          </div>
          <h1 className="text-xl font-semibold text-gray-900">Factory Outputs</h1>
        </div>
        <button onClick={openOutputCreate} className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-medium transition-colors">
          + Add Output
        </button>
      </div>

      {factory.outputs?.length === 0 && (
        <div className="rounded-xl bg-white border border-gray-200 shadow-sm p-12 text-center text-gray-400">
          No outputs recorded for this factory batch.
        </div>
      )}

      {factory.outputs?.map(output => (
        <div key={output.id} className="rounded-xl bg-white border border-gray-200 shadow-sm overflow-hidden">
          <div className="flex items-center justify-between p-4 border-b border-gray-200">
            <div className="flex items-center gap-4">
              <div>
                <p className="font-medium text-gray-900">{output.category_name}</p>
                <p className="text-sm text-gray-500">Grade {output.quality_grade} · {output.weight_kg} kg · {output.bag_count} bags</p>
              </div>
            </div>
            <div className="flex gap-2">
              <button onClick={() => openSaleCreate(output.id)} className="px-3 py-1.5 rounded-lg bg-blue-50 hover:bg-blue-100 text-blue-600 text-xs">+ Sale</button>
              <button onClick={() => openOutputEdit(output)} className="px-3 py-1.5 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Edit</button>
              <button onClick={() => delOutput(output.id)} className="px-3 py-1.5 rounded-lg bg-red-50 hover:bg-red-100 text-red-600 text-xs">Del</button>
            </div>
          </div>

          {output.sales && output.sales.length > 0 && (
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200">
                  {['Date', 'Buyer', 'Weight', 'Price/kg', 'Total', 'Paid', 'Status', ''].map(h => (
                    <th key={h} className="px-4 py-2 text-left text-xs text-gray-400 font-medium">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {output.sales.map(sale => (
                  <tr key={sale.id} className="border-b border-gray-100 hover:bg-gray-50">
                    <td className="px-4 py-2 text-gray-700">{new Date(sale.sale_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })}</td>
                    <td className="px-4 py-2 text-gray-900">{sale.buyer_name}</td>
                    <td className="px-4 py-2 text-gray-700">{sale.weight_sold_kg} kg</td>
                    <td className="px-4 py-2 text-gray-700">PKR {Number(sale.price_per_kg).toLocaleString()}</td>
                    <td className="px-4 py-2 font-medium text-gray-900">PKR {Number(sale.total_amount).toLocaleString()}</td>
                    <td className="px-4 py-2 text-gray-700">PKR {Number(sale.paid_amount).toLocaleString()}</td>
                    <td className="px-4 py-2"><Badge color={payColor(sale.payment_status)}>{sale.payment_status}</Badge></td>
                    <td className="px-4 py-2">
                      <div className="flex gap-1">
                        <button onClick={() => openSaleEdit(sale, output.id)} className="px-2 py-0.5 rounded bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Edit</button>
                        <button onClick={() => delSale(output.id, sale.id)} className="px-2 py-0.5 rounded bg-red-50 hover:bg-red-100 text-red-600 text-xs">Del</button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      ))}

      {/* Output Modal */}
      <Modal open={showOutputModal} onClose={() => setShowOutputModal(false)} title={editingOutput ? 'Edit Output' : 'Add Output'}>
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <Field label="Category Name">
              <Input value={outForm.category_name} onChange={e => setOut('category_name', e.target.value)} />
            </Field>
            <Field label="Quality Grade">
              <Select value={outForm.quality_grade} onChange={e => setOut('quality_grade', e.target.value)}>
                {[1, 2, 3, 4, 5, 6].map(g => <option key={g} value={g}>Grade {g}</option>)}
              </Select>
            </Field>
          </div>
          <div className="grid grid-cols-3 gap-4">
            <Field label="Weight (kg)">
              <Input type="number" value={outForm.weight_kg} onChange={e => setOut('weight_kg', e.target.value)} />
            </Field>
            <Field label="Bag Count">
              <Input type="number" value={outForm.bag_count} onChange={e => setOut('bag_count', e.target.value)} />
            </Field>
            <Field label="Bag Weight (kg)">
              <Input type="number" value={outForm.bag_weight_kg} onChange={e => setOut('bag_weight_kg', e.target.value)} placeholder="Optional" />
            </Field>
          </div>
          <Field label="Notes">
            <Textarea value={outForm.notes} onChange={e => setOut('notes', e.target.value)} rows={2} />
          </Field>
          <div className="flex justify-end gap-2 pt-2">
            <button onClick={() => setShowOutputModal(false)} className="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-900 text-sm">Cancel</button>
            <button onClick={saveOutput} 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>
        </div>
      </Modal>

      {/* Sale Modal */}
      <Modal open={showSaleModal} onClose={() => setShowSaleModal(false)} title={editingSale ? 'Edit Sale' : 'Record Sale'} maxWidth="max-w-xl">
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <Field label="Buyer Name">
              <Input value={saleForm.buyer_name} onChange={e => setSale('buyer_name', e.target.value)} />
            </Field>
            <Field label="Buyer Contact">
              <Input value={saleForm.buyer_contact} onChange={e => setSale('buyer_contact', e.target.value)} />
            </Field>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <Field label="Buyer Type">
              <Select value={saleForm.buyer_type} onChange={e => setSale('buyer_type', e.target.value)}>
                <option value="person">Person</option>
                <option value="company">Company</option>
              </Select>
            </Field>
            <Field label="Sale Type">
              <Select value={saleForm.sale_type} onChange={e => setSale('sale_type', e.target.value)}>
                <option value="full">Full</option>
                <option value="partial">Partial</option>
              </Select>
            </Field>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <Field label="Weight Sold (kg)">
              <Input type="number" value={saleForm.weight_sold_kg} onChange={e => setSale('weight_sold_kg', e.target.value)} />
            </Field>
            <Field label="Price per kg (PKR)">
              <Input type="number" value={saleForm.price_per_kg} onChange={e => setSale('price_per_kg', e.target.value)} />
            </Field>
          </div>
          <div className="grid grid-cols-3 gap-4">
            <Field label="Total (PKR)">
              <Input type="number" value={saleForm.total_amount} onChange={e => setSale('total_amount', e.target.value)} />
            </Field>
            <Field label="Paid (PKR)">
              <Input type="number" value={saleForm.paid_amount} onChange={e => setSale('paid_amount', e.target.value)} />
            </Field>
            <Field label="Payment">
              <Select value={saleForm.payment_status} onChange={e => setSale('payment_status', e.target.value)}>
                <option value="pending">Pending</option>
                <option value="partial">Partial</option>
                <option value="paid">Paid</option>
              </Select>
            </Field>
          </div>
          <Field label="Sale Date">
            <Input type="date" value={saleForm.sale_date} onChange={e => setSale('sale_date', e.target.value)} />
          </Field>
          <Field label="Notes">
            <Textarea value={saleForm.notes} onChange={e => setSale('notes', e.target.value)} rows={2} />
          </Field>
          <div className="flex justify-end gap-2 pt-2">
            <button onClick={() => setShowSaleModal(false)} className="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-900 text-sm">Cancel</button>
            <button onClick={saveSale} 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>
        </div>
      </Modal>
    </div>
  );
}