// components/accounts.jsx — AccountRow, NewAccountForm, AccountsPanel.
// Depends on: React (useState), StatusBadge, Card, post (from api.js)

const PROVIDERS = ["anthropic","openai","openrouter","google","deepseek","groq","mistral","windsurf","cursor","github_copilot"];
const EMPTY_FORM = { name: "", provider: "anthropic", api_key: "", email: "", daily_budget_usd: 5, monthly_budget_usd: 60 };

function AccountRow({ account }) {
  const a = account;
  return (
    <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
      <div>
        <div className="flex items-center gap-2">
          <span className="font-medium text-sm">{a.name}</span>
          <span className="px-1.5 py-0.5 bg-blue-50 text-blue-700 rounded text-xs">{a.provider}</span>
          <span className="px-1.5 py-0.5 bg-gray-100 text-gray-500 rounded text-xs">{a.plan || "free"}</span>
          <StatusBadge ok={a.active} label={a.active ? "active" : "inactive"} />
          {a.over_budget && <StatusBadge ok={false} label="over budget" />}
        </div>
        <div className="text-xs text-gray-500 mt-1">
          Today: ${a.usage?.daily_cost?.toFixed(4)} · Total: ${a.usage?.total_cost?.toFixed(4)} · {a.usage?.total_requests} reqs
        </div>
      </div>
      <div className="text-xs text-gray-400">{a.tools?.length || 0} tools</div>
    </div>
  );
}

function NewAccountForm({ onSubmit, onCancel }) {
  const [form, setForm] = useState({ ...EMPTY_FORM });

  const handleSubmit = async () => {
    await onSubmit(form);
    setForm({ ...EMPTY_FORM });
  };

  return (
    <div className="mt-4 p-4 bg-blue-50 rounded-lg space-y-2">
      <div className="grid grid-cols-2 gap-2">
        <input className="px-2 py-1.5 border rounded text-sm" placeholder="Account name" value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
        <select className="px-2 py-1.5 border rounded text-sm" value={form.provider} onChange={e => setForm({...form, provider: e.target.value})}>
          {PROVIDERS.map(p => <option key={p} value={p}>{p}</option>)}
        </select>
        <input className="px-2 py-1.5 border rounded text-sm col-span-2" placeholder="API Key" type="password" value={form.api_key} onChange={e => setForm({...form, api_key: e.target.value})} />
        <input className="px-2 py-1.5 border rounded text-sm" placeholder="Daily budget $" type="number" value={form.daily_budget_usd} onChange={e => setForm({...form, daily_budget_usd: +e.target.value})} />
        <input className="px-2 py-1.5 border rounded text-sm" placeholder="Monthly budget $" type="number" value={form.monthly_budget_usd} onChange={e => setForm({...form, monthly_budget_usd: +e.target.value})} />
      </div>
      <div className="flex gap-2">
        <button onClick={handleSubmit} className="px-3 py-1.5 bg-blue-600 text-white rounded text-sm hover:bg-blue-700">Create</button>
        <button onClick={onCancel} className="px-3 py-1.5 bg-gray-200 text-gray-700 rounded text-sm">Cancel</button>
      </div>
    </div>
  );
}

function AccountsPanel({ accounts, onRefresh }) {
  const [showForm, setShowForm] = useState(false);

  const handleCreate = async (formData) => {
    await post("/dashboard/accounts", formData);
    setShowForm(false);
    onRefresh();
  };

  return (
    <Card title="Accounts">
      <div className="space-y-3">
        {accounts?.map(a => <AccountRow key={a.id} account={a} />)}
        {(!accounts || accounts.length === 0) && <p className="text-gray-400 text-sm">No accounts configured</p>}
      </div>
      {showForm
        ? <NewAccountForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
        : <button onClick={() => setShowForm(true)} className="mt-3 px-3 py-1.5 border border-dashed border-gray-300 rounded text-sm text-gray-500 hover:border-blue-400 hover:text-blue-600 w-full">+ Add Account</button>
      }
    </Card>
  );
}
