// ═══════════════════════════════════════════════════════════════
//  projects.jsx — Проектно табло (Фаза 6)
//  Статус + реални числа на проект: часове (time_entries),
//  разходи (expenses), приходи (фактури по име на клиент).
//  State lives in app.jsx — this is purely presentational.
// ═══════════════════════════════════════════════════════════════

const PROJECT_STATUSES = [
  { v: "active", bg: "Активен", en: "Active", color: "#7BAA8A" },
  { v: "paused", bg: "Пауза", en: "Paused", color: "#C9912B" },
  { v: "idea", bg: "Идея", en: "Idea", color: "#2D5BFF" },
  { v: "done", bg: "Приключен", en: "Done", color: "#8A949A" },
];
const STATUS_ORDER = { active: 0, paused: 1, idea: 2, done: 3 };

function ProjectsView({ T, lang, projects, invoices, expenses, timeEntries, onSaveProject, onUpdateProject, onDeleteProject }) {
  const { useState, useMemo } = React;
  const L = (bg, en) => (lang === "en" ? en : bg);
  const eur = (n) => `€ ${fmtNum(n)}`;
  const toEUR = (amt, cur) => { const a = Number(amt) || 0; return cur === "BGN" ? a / BGN_PER_EUR : a; };
  const statusDef = (v) => PROJECT_STATUSES.find(s => s.v === v) || PROJECT_STATUSES[0];

  // ─── Canonical project list (known + от данните + от таблицата) ───
  const names = useMemo(() => {
    const s = new Set(window.PROJECTS || []);
    (projects || []).forEach(p => { if (p.name) s.add(p.name); });
    (expenses || []).forEach(e => { if (e.project) s.add(e.project); });
    (timeEntries || []).forEach(t => { if (t.project) s.add(t.project); });
    return [...s];
  }, [projects, expenses, timeEntries]);

  // ─── Aggregate numbers per project ───
  const rows = useMemo(() => {
    return names.map(name => {
      const meta = (projects || []).find(p => p.name === name) || null;
      const nl = name.toLowerCase();
      const hours = (timeEntries || []).filter(t => t.project === name).reduce((s, t) => s + (Number(t.hours) || 0), 0);
      const expense = (expenses || []).filter(e => e.project === name).reduce((s, e) => s + toEUR(e.amount, e.currency), 0);
      const income = (invoices || [])
        .filter(i => i.docType === "invoice")
        .filter(i => `${i.client?.name || ""} ${i.client?.nameEn || ""}`.toLowerCase().includes(nl))
        .reduce((s, i) => s + toEUR(i.base, i.currency), 0);
      const status = meta?.status || "active";
      return { name, meta, status, hours, expense, income, net: income - expense };
    }).sort((a, b) => (STATUS_ORDER[a.status] - STATUS_ORDER[b.status]) || a.name.localeCompare(b.name));
  }, [names, projects, invoices, expenses, timeEntries]);

  // ─── Edit form ───
  const [editName, setEditName] = useState(null); // name being edited
  const [form, setForm] = useState({ status: "active", notes: "", link: "" });
  const [adding, setAdding] = useState(false);
  const [newName, setNewName] = useState("");

  const startEdit = (row) => {
    setEditName(row.name);
    setForm({ status: row.status, notes: row.meta?.notes || "", link: row.meta?.link || "" });
    setAdding(false);
  };
  const saveEdit = (row) => {
    const payload = { name: row.name, status: form.status, notes: form.notes, link: form.link };
    if (row.meta?.id) onUpdateProject({ ...payload, id: row.meta.id });
    else onSaveProject(payload);
    setEditName(null);
  };
  const startAdd = () => { setAdding(true); setEditName(null); setNewName(""); setForm({ status: "active", notes: "", link: "" }); };
  const saveAdd = () => {
    if (!newName.trim()) return;
    onSaveProject({ name: newName.trim(), status: form.status, notes: form.notes, link: form.link });
    setAdding(false); setNewName("");
  };

  const statusOpts = PROJECT_STATUSES.map(s => ({ v: s.v, l: L(s.bg, s.en) }));

  const StatusBadge = ({ v }) => {
    const d = statusDef(v);
    return <span style={{ fontSize: 10, fontWeight: 700, padding: "2px 9px", borderRadius: 9, background: `${d.color}22`, color: d.color }}>{L(d.bg, d.en)}</span>;
  };

  const miniStat = (label, value, color) => (
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 9, letterSpacing: "0.06em", textTransform: "uppercase", color: T.faint }}>{label}</div>
      <div style={{ fontFamily: MONO, fontSize: 14, fontWeight: 700, color: color || T.ink, marginTop: 2, whiteSpace: "nowrap" }}>{value}</div>
    </div>
  );

  return (
    <div style={{ maxWidth: 920, margin: "0 auto", padding: "28px 28px 60px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
        <h2 style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.02em", margin: 0 }}>{L("Проекти", "Projects")}</h2>
        <Button T={T} kind="primary" size="sm" icon="plus" onClick={startAdd}>{L("Нов проект", "New project")}</Button>
      </div>

      {/* ─── Add form ─── */}
      {adding && (
        <Card T={T} title={L("Нов проект", "New project")} icon="repeat">
          <Row>
            <Field label={L("Име", "Name")} value={newName} onChange={setNewName} T={T} minWidth={200} />
            <Select label={L("Статус", "Status")} value={form.status} onChange={v => setForm(p => ({ ...p, status: v }))} options={statusOpts} T={T} minWidth={150} />
          </Row>
          <Row>
            <Field label={L("Бележки", "Notes")} value={form.notes} onChange={v => setForm(p => ({ ...p, notes: v }))} T={T} minWidth={220} />
            <Field label={L("Линк", "Link")} value={form.link} onChange={v => setForm(p => ({ ...p, link: v }))} T={T} minWidth={180} />
          </Row>
          <Row style={{ marginBottom: 0 }}>
            <div style={{ flex: 1 }} />
            <Button T={T} kind="ghost" size="sm" onClick={() => setAdding(false)}>{L("Откажи", "Cancel")}</Button>
            <Button T={T} kind="primary" size="sm" icon="save" onClick={saveAdd}>{L("Запази", "Save")}</Button>
          </Row>
        </Card>
      )}

      {rows.length === 0 ? (
        <Empty T={T} icon="repeat" text={L("Няма проекти", "No projects")} />
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 12 }}>
          {rows.map(row => (
            <div key={row.name} style={{ padding: "16px 18px", background: T.surface, border: `1px solid ${T.line}`, borderRadius: 10, display: "flex", flexDirection: "column", gap: 12 }}>
              {/* Header */}
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: T.ink, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{row.name}</div>
                <StatusBadge v={row.status} />
              </div>

              {editName === row.name ? (
                /* ── Inline edit ── */
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  <Select label={L("Статус", "Status")} value={form.status} onChange={v => setForm(p => ({ ...p, status: v }))} options={statusOpts} T={T} />
                  <Field label={L("Бележки", "Notes")} value={form.notes} onChange={v => setForm(p => ({ ...p, notes: v }))} T={T} />
                  <Field label={L("Линк", "Link")} value={form.link} onChange={v => setForm(p => ({ ...p, link: v }))} T={T} />
                  <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
                    {row.meta?.id && <Button T={T} kind="plain" size="sm" danger icon="trash" onClick={() => { onDeleteProject(row.meta.id); setEditName(null); }}>{L("Изтрий", "Delete")}</Button>}
                    <div style={{ flex: 1 }} />
                    <Button T={T} kind="ghost" size="sm" onClick={() => setEditName(null)}>{L("Откажи", "Cancel")}</Button>
                    <Button T={T} kind="primary" size="sm" icon="save" onClick={() => saveEdit(row)}>{L("Запази", "Save")}</Button>
                  </div>
                </div>
              ) : (
                <>
                  {/* Numbers */}
                  <div style={{ display: "flex", gap: 10 }}>
                    {miniStat(L("Приходи", "Income"), eur(row.income), T.sage)}
                    {miniStat(L("Разходи", "Expenses"), eur(row.expense), T.danger)}
                    {miniStat(L("Часове", "Hours"), `${fmtNum(row.hours)} h`)}
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 8, borderTop: `1px solid ${T.line}` }}>
                    <span style={{ fontSize: 10, color: T.faint, textTransform: "uppercase", letterSpacing: "0.06em" }}>{L("Нето", "Net")}</span>
                    <span style={{ fontFamily: MONO, fontSize: 13, fontWeight: 700, color: row.net >= 0 ? T.sage : T.danger }}>{eur(row.net)}</span>
                  </div>
                  {row.meta?.notes && <div style={{ fontSize: 11, color: T.sub, lineHeight: 1.5 }}>{row.meta.notes}</div>}
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: "auto" }}>
                    {row.meta?.link && <a href={row.meta.link} target="_blank" rel="noopener" style={{ fontSize: 11, color: T.blue, display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="link" size={13} />{L("Отвори", "Open")}</a>}
                    <div style={{ flex: 1 }} />
                    <button title={L("Редактирай", "Edit")} onClick={() => startEdit(row)} style={{ background: "none", border: "none", color: T.sub, cursor: "pointer", padding: 4, display: "flex" }}><Icon name="edit" size={15} /></button>
                  </div>
                </>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ProjectsView });