import { useState } from 'react';
import { useNavigate } from '@tanstack/react-router';
import { useCompanies, useCreateCompany } from '../api/hooks';
import { DataTable, type Column } from '../components/DataTable';
import { StatusBadge, LoadingSpinner, Card } from '../components/ui';
import type { Company } from '../api/hooks';

const columns: Column<Company>[] = [
  { key: 'ticker', header: 'Ticker', className: 'font-mono font-semibold text-brand-300' },
  { key: 'legal_name', header: 'Name' },
  { key: 'sector', header: 'Sector' },
  {
    key: 'active',
    header: 'Status',
    render: (r) => <StatusBadge status={r.active ? 'active' : 'disabled'} />,
  },
  {
    key: 'active_source_count',
    header: 'Sources',
    render: (r) => <span>{r.active_source_count ?? '—'}</span>,
  },
];

export function CompaniesPage() {
  const navigate = useNavigate();
  const { data, isLoading, error } = useCompanies();
  const [showAdd, setShowAdd] = useState(false);

  if (isLoading) return <LoadingSpinner />;
  if (error) return <div className="text-red-400">Failed to load companies</div>;

  return (
    <div>
      <div className="mb-4 flex items-center justify-between">
        <h1 className="text-xl font-semibold text-gray-100">Companies</h1>
        <button
          onClick={() => setShowAdd(true)}
          className="rounded-md bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700"
        >
          Add Company
        </button>
      </div>

      {showAdd && <AddCompanyForm onClose={() => setShowAdd(false)} />}

      <DataTable<Company>
        data={data ?? []}
        columns={columns}
        keyField="id"
        onRowClick={(row) => navigate({ to: '/companies/$id', params: { id: row.id } })}
        filterFn={(row, q) => {
          const lq = q.toLowerCase();
          return (
            row.ticker.toLowerCase().includes(lq) ||
            (row.legal_name ?? '').toLowerCase().includes(lq) ||
            (row.sector ?? '').toLowerCase().includes(lq)
          );
        }}
      />
    </div>
  );
}

function AddCompanyForm({ onClose }: { onClose: () => void }) {
  const [ticker, setTicker] = useState('');
  const [name, setName] = useState('');
  const [sector, setSector] = useState('');
  const [exchange, setExchange] = useState('');
  const mutation = useCreateCompany();

  return (
    <Card className="mb-4">
      <form
        className="space-y-3"
        onSubmit={(e) => {
          e.preventDefault();
          if (ticker.trim() && name.trim()) {
            mutation.mutate(
              {
                ticker: ticker.trim().toUpperCase(),
                legal_name: name.trim(),
                sector: sector || undefined,
                exchange: exchange || undefined,
              },
              { onSuccess: onClose },
            );
          }
        }}
      >
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
          <div>
            <label className="mb-1 block text-xs text-gray-500" htmlFor="add-ticker">Ticker</label>
            <input id="add-ticker" type="text" value={ticker} onChange={(e) => setTicker(e.target.value)} required placeholder="AAPL" className="w-full rounded-md border border-surface-700 bg-surface-900 px-2 py-1.5 text-sm text-gray-200 placeholder-gray-500 uppercase" />
          </div>
          <div>
            <label className="mb-1 block text-xs text-gray-500" htmlFor="add-name">Legal Name</label>
            <input id="add-name" type="text" value={name} onChange={(e) => setName(e.target.value)} required placeholder="Apple Inc." className="w-full rounded-md border border-surface-700 bg-surface-900 px-2 py-1.5 text-sm text-gray-200 placeholder-gray-500" />
          </div>
          <div>
            <label className="mb-1 block text-xs text-gray-500" htmlFor="add-sector">Sector</label>
            <input id="add-sector" type="text" value={sector} onChange={(e) => setSector(e.target.value)} placeholder="Technology" className="w-full rounded-md border border-surface-700 bg-surface-900 px-2 py-1.5 text-sm text-gray-200 placeholder-gray-500" />
          </div>
          <div>
            <label className="mb-1 block text-xs text-gray-500" htmlFor="add-exchange">Exchange</label>
            <input id="add-exchange" type="text" value={exchange} onChange={(e) => setExchange(e.target.value)} placeholder="NASDAQ" className="w-full rounded-md border border-surface-700 bg-surface-900 px-2 py-1.5 text-sm text-gray-200 placeholder-gray-500" />
          </div>
        </div>
        {mutation.error && <div className="text-xs text-red-400">Failed to create company</div>}
        <div className="flex gap-2">
          <button type="submit" disabled={mutation.isPending} className="rounded-md bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50">
            {mutation.isPending ? 'Creating…' : 'Create'}
          </button>
          <button type="button" onClick={onClose} className="rounded-md border border-surface-700 px-3 py-1.5 text-sm text-gray-400 hover:bg-surface-800">
            Cancel
          </button>
        </div>
      </form>
    </Card>
  );
}