import { useState, useEffect, useRef, useCallback } from "react";

// ─── Data ───────────────────────────────────────────────────────────────────
const MANAGERS = ["Олег", "Дима", "Патрик"];
const SOURCES = ["Telegram", "WhatsApp", "Сайт", "Instagram", "Авито"];
const QUAL_STATUSES = ["Не обработан", "Квалифицирован", "Не квалифицирован"];
const FINAL_STATUSES = ["Думает", "Отмена", "Недозвон", "Назначена встреча", "Продажа", "Перенос"];
const BUY_TERMS = ["до 1 мес", "1–3 мес", "3–6 мес", "6+ мес", "не определен"];

const INITIAL_LEADS = [
  { id: 1, source: "Telegram", channel: "@mebel_kazan", created: "2026-05-10", phone: "+7 916 111-22-33", rating: 5, name: "Алина Соколова", qual: "Квалифицирован", buyTerm: "до 1 мес", manager: "Олег", finalStatus: "Назначена встреча", comment: "Интересует диван угловой, бюджет 80k", saleAmount: 0, history: [{ date: "2026-05-10 09:00", text: "Лид создан из Telegram", user: "Система" }, { date: "2026-05-10 10:30", text: "Назначен менеджер: Олег", user: "Admin" }] },
  { id: 2, source: "WhatsApp", channel: "Прямой", created: "2026-05-09", phone: "+7 903 222-33-44", rating: 4, name: "Виктор Морозов", qual: "Квалифицирован", buyTerm: "1–3 мес", manager: "Дима", finalStatus: "Думает", comment: "Кухня на заказ, размеры есть", saleAmount: 0, history: [{ date: "2026-05-09 14:00", text: "Лид создан из WhatsApp", user: "Система" }] },
  { id: 3, source: "Сайт", channel: "mebel-pro.ru", created: "2026-05-11", phone: "+7 926 333-44-55", rating: 3, name: "Марина Белова", qual: "Не обработан", buyTerm: "3–6 мес", manager: "Патрик", finalStatus: "Недозвон", comment: "", saleAmount: 0, history: [{ date: "2026-05-11 11:00", text: "Лид создан с сайта", user: "Система" }] },
  { id: 4, source: "Telegram", channel: "@furni_msk", created: "2026-05-08", phone: "+7 917 444-55-66", rating: 5, name: "Иван Козлов", qual: "Квалифицирован", buyTerm: "до 1 мес", manager: "Олег", finalStatus: "Продажа", comment: "Продажа закрыта! Спальный гарнитур", saleAmount: 145000, history: [{ date: "2026-05-08 09:00", text: "Лид создан", user: "Система" }, { date: "2026-05-08 16:00", text: "Статус: Продажа", user: "Олег" }] },
  { id: 5, source: "Instagram", channel: "@mebel_ig", created: "2026-05-07", phone: "+7 905 555-66-77", rating: 4, name: "Светлана Попова", qual: "Квалифицирован", buyTerm: "1–3 мес", manager: "Дима", finalStatus: "Продажа", comment: "Закрыта. Гостиная мебель", saleAmount: 87000, history: [{ date: "2026-05-07 10:00", text: "Лид создан", user: "Система" }] },
  { id: 6, source: "Авито", channel: "avito.ru", created: "2026-05-06", phone: "+7 909 666-77-88", rating: 2, name: "Олег Сидоров", qual: "Не квалифицирован", buyTerm: "6+ мес", manager: null, finalStatus: "Отмена", comment: "Просто смотрит цены", saleAmount: 0, history: [{ date: "2026-05-06 12:00", text: "Лид создан", user: "Система" }] },
  { id: 7, source: "Telegram", channel: "@mebel_kazan", created: "2026-05-12", phone: "+7 912 777-88-99", rating: 5, name: "Анна Новикова", qual: "Квалифицирован", buyTerm: "до 1 мес", manager: "Патрик", finalStatus: "Назначена встреча", comment: "VIP клиент. Полный интерьер", saleAmount: 0, history: [{ date: "2026-05-12 08:00", text: "Лид создан", user: "Система" }] },
  { id: 8, source: "Сайт", channel: "mebel-pro.ru", created: "2026-05-05", phone: "+7 911 888-99-00", rating: 3, name: "Дмитрий Орлов", qual: "Не обработан", buyTerm: "не определен", manager: null, finalStatus: "Думает", comment: "", saleAmount: 0, history: [{ date: "2026-05-05 15:00", text: "Лид создан", user: "Система" }] },
];

const INITIAL_EVENTS = [
  { id: 1, leadId: 1, type: "Встреча в салоне", title: "Встреча с Алиной Соколовой", manager: "Олег", date: "2026-05-15", time: "14:00", note: "Показать угловые диваны", done: false },
  { id: 2, leadId: 7, type: "Замер", title: "Замер у Анны Новиковой", manager: "Патрик", date: "2026-05-14", time: "11:00", note: "Адрес: ул. Ленина 45", done: false },
];

// ─── Helpers ─────────────────────────────────────────────────────────────────
const genId = () => Date.now() + Math.floor(Math.random() * 1000);
const today = () => new Date().toISOString().split("T")[0];
const fmtMoney = (n) => n ? Number(n).toLocaleString("ru-RU") + " ₽" : "—";
const initials = (n) => n ? n.split(" ").slice(0, 2).map(w => w[0]).join("").toUpperCase() : "?";

const MANAGER_COLORS = { "Олег": "#4f87c5", "Дима": "#6db877", "Патрик": "#c47dd4" };
const STATUS_COLORS = {
  "Продажа": "#22c55e", "Назначена встреча": "#3b82f6", "Думает": "#f59e0b",
  "Недозвон": "#94a3b8", "Отмена": "#ef4444", "Перенос": "#a78bfa"
};
const RATING_COLOR = (r) => r >= 5 ? "#22c55e" : r >= 4 ? "#84cc16" : r >= 3 ? "#f59e0b" : r >= 2 ? "#f97316" : "#ef4444";

// ─── AI Agent ─────────────────────────────────────────────────────────────────
async function askAI(messages) {
  const res = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      model: "claude-sonnet-4-20250514",
      max_tokens: 1000,
      system: `Ты AI-помощник в CRM системе мебельной компании. Тебе доступны данные о лидах, менеджерах и статистике.
Менеджеры: Олег, Дима, Патрик.
Отвечай кратко и по делу. Давай конкретные советы по работе с лидами, анализируй данные, помогай с принятием решений.
Когда тебя спрашивают о данных — анализируй их из контекста. Отвечай на русском языке.`,
      messages,
    }),
  });
  const d = await res.json();
  return d.content?.map(b => b.text || "").join("") || "Ошибка ответа";
}

// ─── Components ───────────────────────────────────────────────────────────────
function Stars({ value, onChange }) {
  return (
    <div style={{ display: "flex", gap: 2 }}>
      {[1, 2, 3, 4, 5].map(s => (
        <span key={s} onClick={() => onChange && onChange(s)}
          style={{ cursor: onChange ? "pointer" : "default", fontSize: 16, color: s <= value ? "#f59e0b" : "#334155", lineHeight: 1 }}>★</span>
      ))}
    </div>
  );
}

function Badge({ text, color, bg }) {
  return <span style={{ background: bg || "#1e293b", color: color || "#94a3b8", padding: "2px 8px", borderRadius: 4, fontSize: 11, fontWeight: 600, whiteSpace: "nowrap" }}>{text}</span>;
}

function Avatar({ name, color, size = 32 }) {
  return (
    <div style={{ width: size, height: size, borderRadius: "50%", background: color || "#334155", display: "flex", alignItems: "center", justifyContent: "center", fontSize: size * 0.35, fontWeight: 700, color: "#fff", flexShrink: 0 }}>
      {initials(name)}
    </div>
  );
}

// ─── Stat Card ────────────────────────────────────────────────────────────────
function StatCard({ label, value, sub, accent }) {
  return (
    <div style={{ background: "#0f172a", border: "1px solid #1e293b", borderRadius: 10, padding: "14px 16px", minWidth: 110 }}>
      <div style={{ fontSize: 11, color: "#475569", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 700, color: accent || "#f1f5f9", lineHeight: 1 }}>{value}</div>
      {sub && <div style={{ fontSize: 11, color: "#475569", marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

// ─── Lead Row ─────────────────────────────────────────────────────────────────
function LeadRow({ lead, onOpen, onAssign }) {
  const sc = STATUS_COLORS[lead.finalStatus] || "#475569";
  return (
    <tr onClick={() => onOpen(lead)} style={{ cursor: "pointer", borderBottom: "1px solid #1e293b", transition: "background 0.1s" }}
      onMouseEnter={e => e.currentTarget.style.background = "#0f172a"}
      onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
      <td style={{ padding: "10px 12px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Avatar name={lead.name} color={lead.manager ? MANAGER_COLORS[lead.manager] : "#334155"} size={30} />
          <div>
            <div style={{ fontSize: 13, fontWeight: 600, color: "#f1f5f9" }}>{lead.name}</div>
            <div style={{ fontSize: 11, color: "#475569" }}>{lead.phone}</div>
          </div>
        </div>
      </td>
      <td style={{ padding: "10px 8px" }}><Badge text={lead.source} bg="#1e293b" color="#94a3b8" /></td>
      <td style={{ padding: "10px 8px" }}><Stars value={lead.rating} /></td>
      <td style={{ padding: "10px 8px" }}>
        <Badge text={lead.qual} bg={lead.qual === "Квалифицирован" ? "#052e16" : lead.qual === "Не квалифицирован" ? "#1c0a0a" : "#1e293b"} color={lead.qual === "Квалифицирован" ? "#86efac" : lead.qual === "Не квалифицирован" ? "#fca5a5" : "#64748b"} />
      </td>
      <td style={{ padding: "10px 8px" }}>
        {lead.manager
          ? <div style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: "50%", background: MANAGER_COLORS[lead.manager], display: "inline-block" }} /><span style={{ fontSize: 13, color: "#cbd5e1" }}>{lead.manager}</span></div>
          : <select onClick={e => e.stopPropagation()} onChange={e => onAssign(lead.id, e.target.value)} style={{ background: "#1e293b", border: "1px solid #334155", color: "#94a3b8", borderRadius: 6, padding: "3px 6px", fontSize: 12, cursor: "pointer" }}>
            <option value="">Назначить</option>
            {MANAGERS.map(m => <option key={m} value={m}>{m}</option>)}
          </select>}
      </td>
      <td style={{ padding: "10px 8px" }}><Badge text={lead.finalStatus} bg="#0f172a" color={sc} /></td>
      <td style={{ padding: "10px 8px", fontSize: 11, color: "#475569" }}>{lead.created}</td>
    </tr>
  );
}

// ─── Lead Modal ───────────────────────────────────────────────────────────────
function LeadModal({ lead, onClose, onSave, currentUser }) {
  const [form, setForm] = useState({ ...lead });
  const upd = (k, v) => setForm(p => ({ ...p, [k]: v }));

  const save = () => {
    const hist = [...(form.history || [])];
    if (form.finalStatus !== lead.finalStatus) hist.push({ date: new Date().toLocaleString("ru-RU"), text: `Статус изменён: ${lead.finalStatus} → ${form.finalStatus}`, user: currentUser });
    if (form.manager !== lead.manager && form.manager) hist.push({ date: new Date().toLocaleString("ru-RU"), text: `Назначен менеджер: ${form.manager}`, user: currentUser });
    if (form.comment !== lead.comment) hist.push({ date: new Date().toLocaleString("ru-RU"), text: `Обновлён комментарий`, user: currentUser });
    onSave({ ...form, history: hist });
  };

  return (
    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.75)", zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{ background: "#0a1628", border: "1px solid #1e293b", borderRadius: 14, width: "100%", maxWidth: 700, maxHeight: "90vh", overflow: "hidden", display: "flex", flexDirection: "column" }}>
        {/* Header */}
        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "16px 20px", borderBottom: "1px solid #1e293b" }}>
          <Avatar name={form.name} color={form.manager ? MANAGER_COLORS[form.manager] : "#334155"} size={42} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: "#f1f5f9" }}>{form.name}</div>
            <div style={{ fontSize: 13, color: "#475569" }}>{form.phone} · {form.source}</div>
          </div>
          <Stars value={form.rating} onChange={v => upd("rating", v)} />
          <button onClick={onClose} style={{ background: "none", border: "none", color: "#475569", fontSize: 22, cursor: "pointer", lineHeight: 1 }}>×</button>
        </div>
        {/* Body */}
        <div style={{ flex: 1, overflow: "auto", padding: 20, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {/* Left */}
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <Field label="Имя" value={form.name} onChange={v => upd("name", v)} />
            <Field label="Телефон" value={form.phone} onChange={v => upd("phone", v)} />
            <FieldSelect label="Источник" value={form.source} onChange={v => upd("source", v)} options={SOURCES} />
            <FieldSelect label="Квалификация" value={form.qual} onChange={v => upd("qual", v)} options={QUAL_STATUSES} />
            <FieldSelect label="Срок покупки" value={form.buyTerm} onChange={v => upd("buyTerm", v)} options={BUY_TERMS} />
            <FieldSelect label="Менеджер" value={form.manager || ""} onChange={v => upd("manager", v)} options={["", ...MANAGERS]} />
            <FieldSelect label="Финальный статус" value={form.finalStatus} onChange={v => upd("finalStatus", v)} options={FINAL_STATUSES} />
            {form.finalStatus === "Продажа" && <Field label="Сумма продажи (₽)" value={form.saleAmount} onChange={v => upd("saleAmount", Number(v))} type="number" />}
          </div>
          {/* Right */}
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div>
              <div style={{ fontSize: 11, color: "#475569", fontWeight: 600, marginBottom: 4 }}>КОММЕНТАРИЙ</div>
              <textarea value={form.comment} onChange={e => upd("comment", e.target.value)} rows={4}
                style={{ width: "100%", background: "#0f172a", border: "1px solid #1e293b", borderRadius: 8, color: "#cbd5e1", padding: 10, fontSize: 13, resize: "vertical", fontFamily: "inherit" }} />
            </div>
            <div>
              <div style={{ fontSize: 11, color: "#475569", fontWeight: 600, marginBottom: 8 }}>ИСТОРИЯ</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 6, maxHeight: 220, overflow: "auto" }}>
                {(form.history || []).slice().reverse().map((h, i) => (
                  <div key={i} style={{ background: "#0f172a", border: "1px solid #1e293b", borderRadius: 8, padding: "8px 10px" }}>
                    <div style={{ fontSize: 11, color: "#3b82f6", fontWeight: 600 }}>{h.user} · {h.date}</div>
                    <div style={{ fontSize: 12, color: "#94a3b8", marginTop: 2 }}>{h.text}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
        <div style={{ padding: "12px 20px", borderTop: "1px solid #1e293b", display: "flex", justifyContent: "flex-end", gap: 8 }}>
          <button onClick={onClose} style={{ background: "none", border: "1px solid #1e293b", color: "#94a3b8", padding: "8px 16px", borderRadius: 8, cursor: "pointer", fontSize: 13 }}>Отмена</button>
          <button onClick={save} style={{ background: "#3b82f6", border: "none", color: "#fff", padding: "8px 20px", borderRadius: 8, cursor: "pointer", fontSize: 13, fontWeight: 600 }}>Сохранить</button>
        </div>
      </div>
    </div>
  );
}

function Field({ label, value, onChange, type = "text" }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: "#475569", fontWeight: 600, marginBottom: 4 }}>{label.toUpperCase()}</div>
      <input type={type} value={value} onChange={e => onChange(e.target.value)}
        style={{ width: "100%", background: "#0f172a", border: "1px solid #1e293b", borderRadius: 8, color: "#cbd5e1", padding: "7px 10px", fontSize: 13 }} />
    </div>
  );
}
function FieldSelect({ label, value, onChange, options }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: "#475569", fontWeight: 600, marginBottom: 4 }}>{label.toUpperCase()}</div>
      <select value={value} onChange={e => onChange(e.target.value)}
        style={{ width: "100%", background: "#0f172a", border: "1px solid #1e293b", borderRadius: 8, color: "#cbd5e1", padding: "7px 10px", fontSize: 13 }}>
        {options.map(o => <option key={o} value={o}>{o || "— Не назначен —"}</option>)}
      </select>
    </div>
  );
}

// ─── Analytics Page ───────────────────────────────────────────────────────────
function AnalyticsPage({ leads }) {
  const stats = MANAGERS.map(m => {
    const ml = leads.filter(l => l.manager === m);
    const total = ml.length;
    const ai = total ? (ml.reduce((s, l) => s + l.rating, 0) / total).toFixed(2) : 0;
    const kwaly = ml.filter(l => l.rating >= 4).length;
    const kwalyPct = total ? Math.round(kwaly / total * 100) : 0;
    const r4 = ml.filter(l => l.rating === 4).length;
    const r5 = ml.filter(l => l.rating === 5).length;
    const _4to5 = r4 ? Math.round(r5 / r4 * 100) : 0;
    const sales = ml.filter(l => l.finalStatus === "Продажа");
    const salesCount = sales.length;
    const _5toSell = r5 ? Math.round(salesCount / r5 * 100) : 0;
    const totalSum = sales.reduce((s, l) => s + (l.saleAmount || 0), 0);
    return { m, total, ai, kwaly, kwalyPct, _4to5, _5toSell, salesCount, totalSum };
  });

  const allLeads = leads.length;
  const allSales = leads.filter(l => l.finalStatus === "Продажа").length;
  const allRev = leads.filter(l => l.finalStatus === "Продажа").reduce((s, l) => s + (l.saleAmount || 0), 0);
  const allQual = leads.filter(l => l.qual === "Квалифицирован").length;

  const srcData = SOURCES.map(s => ({ s, c: leads.filter(l => l.source === s).length })).filter(x => x.c > 0);
  const maxSrc = Math.max(...srcData.map(x => x.c), 1);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        <StatCard label="Всего лидов" value={allLeads} />
        <StatCard label="Квалифицированных" value={allQual} sub={`${Math.round(allQual / allLeads * 100)}%`} accent="#84cc16" />
        <StatCard label="Продаж" value={allSales} sub={`конверсия ${Math.round(allSales / allLeads * 100)}%`} accent="#22c55e" />
        <StatCard label="Выручка" value={fmtMoney(allRev)} accent="#f59e0b" />
      </div>

      {/* Per manager */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
        {stats.map(s => (
          <div key={s.m} style={{ background: "#0a1628", border: "1px solid #1e293b", borderRadius: 12, padding: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
              <Avatar name={s.m} color={MANAGER_COLORS[s.m]} size={36} />
              <span style={{ fontSize: 16, fontWeight: 700, color: "#f1f5f9" }}>{s.m}</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {[
                ["AI", s.ai, "ср. рейтинг"],
                ["Kwaly", s.kwaly, "лидов 4-5★"],
                ["Kwaly %", s.kwalyPct + "%", "квалиф."],
                ["4→5", s._4to5 + "%", "конверсия"],
                ["5→Sale", s._5toSell + "%", "закрытие"],
                ["Many", s.salesCount, "продаж"],
              ].map(([lbl, val, sub]) => (
                <div key={lbl} style={{ background: "#0f172a", borderRadius: 8, padding: "10px 12px" }}>
                  <div style={{ fontSize: 10, color: "#475569", fontWeight: 700, letterSpacing: "0.06em" }}>{lbl}</div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: "#f1f5f9", lineHeight: 1.2 }}>{val}</div>
                  <div style={{ fontSize: 10, color: "#334155" }}>{sub}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 12, background: "#0f172a", borderRadius: 8, padding: "10px 12px" }}>
              <div style={{ fontSize: 10, color: "#475569", fontWeight: 700, letterSpacing: "0.06em" }}>TOTAL</div>
              <div style={{ fontSize: 18, fontWeight: 700, color: "#f59e0b" }}>{fmtMoney(s.totalSum)}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Source chart */}
      <div style={{ background: "#0a1628", border: "1px solid #1e293b", borderRadius: 12, padding: 16 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: "#94a3b8", marginBottom: 12 }}>ЛИДЫ ПО ИСТОЧНИКАМ</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {srcData.map(x => (
            <div key={x.s} style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 80, fontSize: 12, color: "#94a3b8", textAlign: "right", flexShrink: 0 }}>{x.s}</span>
              <div style={{ height: 24, background: "#3b82f6", borderRadius: 4, width: `${x.c / maxSrc * 300}px`, display: "flex", alignItems: "center", padding: "0 8px", fontSize: 12, fontWeight: 700, color: "#fff", minWidth: 30 }}>{x.c}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Calendar Page ────────────────────────────────────────────────────────────
function CalendarPage({ events, leads, onAddEvent, onToggleDone }) {
  const [form, setForm] = useState({ type: "Звонок", title: "", manager: "Олег", date: today(), time: "10:00", note: "", leadId: "" });
  const [show, setShow] = useState(false);
  const EVENT_TYPES = ["Звонок", "Встреча в салоне", "Замер", "Напоминание"];
  const sorted = [...events].sort((a, b) => a.date.localeCompare(b.date));

  const handleAdd = () => {
    if (!form.title) return;
    onAddEvent({ ...form, id: genId(), done: false, leadId: form.leadId ? Number(form.leadId) : null });
    setForm({ type: "Звонок", title: "", manager: "Олег", date: today(), time: "10:00", note: "", leadId: "" });
    setShow(false);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 15, fontWeight: 700, color: "#94a3b8" }}>СОБЫТИЯ И ВСТРЕЧИ</div>
        <button onClick={() => setShow(!show)} style={{ background: "#3b82f6", border: "none", color: "#fff", padding: "8px 16px", borderRadius: 8, cursor: "pointer", fontWeight: 600, fontSize: 13 }}>+ Добавить</button>
      </div>

      {show && (
        <div style={{ background: "#0a1628", border: "1px solid #1e293b", borderRadius: 12, padding: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Field label="Название" value={form.title} onChange={v => setForm(p => ({ ...p, title: v }))} />
          <FieldSelect label="Тип" value={form.type} onChange={v => setForm(p => ({ ...p, type: v }))} options={EVENT_TYPES} />
          <FieldSelect label="Менеджер" value={form.manager} onChange={v => setForm(p => ({ ...p, manager: v }))} options={MANAGERS} />
          <Field label="Дата" value={form.date} onChange={v => setForm(p => ({ ...p, date: v }))} type="date" />
          <Field label="Время" value={form.time} onChange={v => setForm(p => ({ ...p, time: v }))} type="time" />
          <div>
            <div style={{ fontSize: 11, color: "#475569", fontWeight: 600, marginBottom: 4 }}>ПРИВЯЗАТЬ ЛИД</div>
            <select value={form.leadId} onChange={e => setForm(p => ({ ...p, leadId: e.target.value }))}
              style={{ width: "100%", background: "#0f172a", border: "1px solid #1e293b", borderRadius: 8, color: "#cbd5e1", padding: "7px 10px", fontSize: 13 }}>
              <option value="">— Без привязки —</option>
              {leads.map(l => <option key={l.id} value={l.id}>{l.name}</option>)}
            </select>
          </div>
          <div style={{ gridColumn: "1/-1" }}>
            <Field label="Заметка" value={form.note} onChange={v => setForm(p => ({ ...p, note: v }))} />
          </div>
          <div style={{ gridColumn: "1/-1", display: "flex", justifyContent: "flex-end", gap: 8 }}>
            <button onClick={() => setShow(false)} style={{ background: "none", border: "1px solid #1e293b", color: "#94a3b8", padding: "7px 14px", borderRadius: 8, cursor: "pointer", fontSize: 13 }}>Отмена</button>
            <button onClick={handleAdd} style={{ background: "#3b82f6", border: "none", color: "#fff", padding: "7px 16px", borderRadius: 8, cursor: "pointer", fontSize: 13, fontWeight: 600 }}>Создать</button>
          </div>
        </div>
      )}

      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {sorted.map(ev => {
          const linked = ev.leadId ? leads.find(l => l.id === ev.leadId) : null;
          const TYPE_ICONS = { "Звонок": "📞", "Встреча в салоне": "🏪", "Замер": "📐", "Напоминание": "🔔" };
          return (
            <div key={ev.id} style={{ background: "#0a1628", border: `1px solid ${ev.done ? "#1e293b" : "#1e3a5f"}`, borderRadius: 10, padding: "12px 14px", display: "flex", gap: 12, alignItems: "center", opacity: ev.done ? 0.5 : 1 }}>
              <div style={{ fontSize: 22 }}>{TYPE_ICONS[ev.type] || "📅"}</div>
              <div style={{ flex: 1 }}>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ fontSize: 14, fontWeight: 600, color: "#f1f5f9", textDecoration: ev.done ? "line-through" : "none" }}>{ev.title}</span>
                  <Badge text={ev.type} bg="#0f172a" color="#64748b" />
                </div>
                <div style={{ fontSize: 12, color: "#475569", marginTop: 3 }}>
                  {ev.date} {ev.time} · {ev.manager}
                  {linked && <span style={{ color: "#3b82f6", marginLeft: 8 }}>→ {linked.name}</span>}
                </div>
                {ev.note && <div style={{ fontSize: 12, color: "#334155", marginTop: 3 }}>{ev.note}</div>}
              </div>
              <button onClick={() => onToggleDone(ev.id)} style={{ background: ev.done ? "#1e293b" : "#052e16", border: "none", color: ev.done ? "#475569" : "#22c55e", padding: "6px 12px", borderRadius: 6, cursor: "pointer", fontSize: 12 }}>
                {ev.done ? "Отменить" : "Готово"}
              </button>
            </div>
          );
        })}
        {sorted.length === 0 && <div style={{ textAlign: "center", padding: 40, color: "#334155", fontSize: 14 }}>Нет событий</div>}
      </div>
    </div>
  );
}

// ─── AI Chat Panel ────────────────────────────────────────────────────────────
function AIPanel({ leads, events, onClose }) {
  const [msgs, setMsgs] = useState([
    { role: "assistant", content: "Привет! Я AI-помощник вашей CRM. Могу анализировать лиды, давать рекомендации по продажам, подсказывать, каким клиентам уделить внимание. Что вас интересует?" }
  ]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const bottomRef = useRef();

  useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: "smooth" }); }, [msgs]);

  const send = useCallback(async (text) => {
    if (!text.trim() || loading) return;
    const context = `
Данные CRM:
- Всего лидов: ${leads.length}
- Лидов с менеджерами: ${leads.filter(l => l.manager).length}
- Продаж: ${leads.filter(l => l.finalStatus === "Продажа").length}
- Выручка: ${leads.filter(l => l.finalStatus === "Продажа").reduce((s, l) => s + (l.saleAmount || 0), 0)} руб.
- Квалифицированных: ${leads.filter(l => l.qual === "Квалифицирован").length}
- Менеджеры: ${MANAGERS.map(m => `${m}: ${leads.filter(l => l.manager === m).length} лидов, ${leads.filter(l => l.manager === m && l.finalStatus === "Продажа").length} продаж`).join("; ")}
- Предстоящих событий: ${events.filter(e => !e.done).length}

Вопрос пользователя: ${text}`;

    const userMsg = { role: "user", content: text };
    setMsgs(p => [...p, userMsg]);
    setInput("");
    setLoading(true);
    try {
      const reply = await askAI([...msgs.filter(m => m.role !== "assistant" || msgs.indexOf(m) > 0), { role: "user", content: context }]);
      setMsgs(p => [...p, { role: "assistant", content: reply }]);
    } catch {
      setMsgs(p => [...p, { role: "assistant", content: "Ошибка соединения с AI. Попробуйте снова." }]);
    }
    setLoading(false);
  }, [msgs, leads, events, loading]);

  const QUICK = ["Кто из менеджеров работает лучше?", "Какие лиды требуют срочного внимания?", "Посоветуй стратегию на сегодня", "Анализ воронки продаж"];

  return (
    <div style={{ position: "fixed", right: 0, top: 0, bottom: 0, width: 380, background: "#070e1a", borderLeft: "1px solid #1e293b", display: "flex", flexDirection: "column", zIndex: 100 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 16px", borderBottom: "1px solid #1e293b" }}>
        <div style={{ width: 34, height: 34, borderRadius: "50%", background: "linear-gradient(135deg, #3b82f6, #8b5cf6)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }}>✦</div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: "#f1f5f9" }}>AI-помощник</div>
          <div style={{ fontSize: 11, color: "#22c55e" }}>● онлайн</div>
        </div>
        <button onClick={onClose} style={{ marginLeft: "auto", background: "none", border: "none", color: "#475569", fontSize: 20, cursor: "pointer" }}>×</button>
      </div>
      <div style={{ flex: 1, overflow: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
        {msgs.map((m, i) => (
          <div key={i} style={{ display: "flex", gap: 8, alignItems: "flex-start", flexDirection: m.role === "user" ? "row-reverse" : "row" }}>
            {m.role === "assistant" && <div style={{ width: 28, height: 28, borderRadius: "50%", background: "linear-gradient(135deg, #3b82f6, #8b5cf6)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, flexShrink: 0 }}>✦</div>}
            <div style={{ background: m.role === "user" ? "#1e3a5f" : "#0f172a", border: `1px solid ${m.role === "user" ? "#2563eb" : "#1e293b"}`, borderRadius: 10, padding: "10px 12px", fontSize: 13, color: "#cbd5e1", maxWidth: "85%", lineHeight: 1.6, whiteSpace: "pre-wrap" }}>
              {m.content}
            </div>
          </div>
        ))}
        {loading && <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <div style={{ width: 28, height: 28, borderRadius: "50%", background: "linear-gradient(135deg, #3b82f6, #8b5cf6)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12 }}>✦</div>
          <div style={{ background: "#0f172a", border: "1px solid #1e293b", borderRadius: 10, padding: "10px 14px", color: "#475569", fontSize: 13 }}>Думаю...</div>
        </div>}
        <div ref={bottomRef} />
      </div>
      <div style={{ padding: "8px 16px", display: "flex", flexWrap: "wrap", gap: 6, borderTop: "1px solid #0f172a" }}>
        {QUICK.map(q => <button key={q} onClick={() => send(q)} style={{ background: "#0f172a", border: "1px solid #1e293b", color: "#64748b", padding: "4px 10px", borderRadius: 6, cursor: "pointer", fontSize: 11 }}>{q}</button>)}
      </div>
      <div style={{ padding: "10px 16px", borderTop: "1px solid #1e293b", display: "flex", gap: 8 }}>
        <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === "Enter" && send(input)} placeholder="Спросить AI..." style={{ flex: 1, background: "#0f172a", border: "1px solid #1e293b", borderRadius: 8, color: "#cbd5e1", padding: "9px 12px", fontSize: 13 }} />
        <button onClick={() => send(input)} disabled={loading || !input.trim()} style={{ background: "#3b82f6", border: "none", color: "#fff", width: 38, height: 38, borderRadius: 8, cursor: "pointer", fontSize: 18, display: "flex", alignItems: "center", justifyContent: "center", opacity: loading || !input.trim() ? 0.5 : 1 }}>↑</button>
      </div>
    </div>
  );
}

// ─── Main App ─────────────────────────────────────────────────────────────────
export default function App() {
  const [leads, setLeads] = useState(INITIAL_LEADS);
  const [events, setEvents] = useState(INITIAL_EVENTS);
  const [page, setPage] = useState("all");
  const [selectedLead, setSelectedLead] = useState(null);
  const [showAI, setShowAI] = useState(false);
  const [currentUser] = useState("Admin");
  const [filter, setFilter] = useState({ manager: "", source: "", qual: "", status: "", rating: "" });
  const [search, setSearch] = useState("");
  const [showAddLead, setShowAddLead] = useState(false);
  const [newLead, setNewLead] = useState({ name: "", phone: "", source: "Telegram", channel: "", qual: "Не обработан", buyTerm: "не определен", manager: "", finalStatus: "Думает", comment: "", rating: 3 });

  const PAGES = [
    { id: "all", label: "Все лиды" },
    { id: "Олег", label: "Олег" },
    { id: "Дима", label: "Дима" },
    { id: "Патрик", label: "Патрик" },
    { id: "calendar", label: "Календарь" },
    { id: "analytics", label: "Аналитика" },
  ];

  const visibleLeads = leads.filter(l => {
    if (page !== "all" && !["calendar", "analytics"].includes(page) && l.manager !== page) return false;
    if (filter.manager && l.manager !== filter.manager) return false;
    if (filter.source && l.source !== filter.source) return false;
    if (filter.qual && l.qual !== filter.qual) return false;
    if (filter.status && l.finalStatus !== filter.status) return false;
    if (filter.rating && l.rating !== Number(filter.rating)) return false;
    if (search) {
      const q = search.toLowerCase();
      return l.name.toLowerCase().includes(q) || l.phone.includes(q) || l.comment.toLowerCase().includes(q);
    }
    return true;
  });

  const handleAssign = (id, manager) => {
    setLeads(ls => ls.map(l => l.id !== id ? l : {
      ...l, manager,
      history: [...(l.history || []), { date: new Date().toLocaleString("ru-RU"), text: `Назначен менеджер: ${manager}`, user: currentUser }]
    }));
  };

  const handleSaveLead = (updated) => {
    setLeads(ls => ls.map(l => l.id === updated.id ? updated : l));
    setSelectedLead(null);
  };

  const handleAddLead = () => {
    if (!newLead.name || !newLead.phone) return;
    const lead = { ...newLead, id: genId(), created: today(), saleAmount: 0, history: [{ date: new Date().toLocaleString("ru-RU"), text: "Лид создан вручную", user: currentUser }] };
    setLeads(ls => [lead, ...ls]);
    setNewLead({ name: "", phone: "", source: "Telegram", channel: "", qual: "Не обработан", buyTerm: "не определен", manager: "", finalStatus: "Думает", comment: "", rating: 3 });
    setShowAddLead(false);
  };

  const simulateTgLead = () => {
    const names = ["Кирилл Романов", "Юлия Федорова", "Сергей Быков", "Наталья Павлова"];
    const phones = ["+7 910 ", "+7 925 ", "+7 963 "];
    const n = names[Math.floor(Math.random() * names.length)];
    const ph = phones[Math.floor(Math.random() * phones.length)] + Math.floor(100 + Math.random() * 900) + "-" + Math.floor(10 + Math.random() * 90) + "-" + Math.floor(10 + Math.random() * 90);
    const lead = { id: genId(), source: "Telegram", channel: "@mebel_kazan", created: today(), phone: ph, rating: Math.ceil(Math.random() * 5), name: n, qual: "Не обработан", buyTerm: "не определен", manager: null, finalStatus: "Думает", comment: "Лид из Telegram-бота", saleAmount: 0, history: [{ date: new Date().toLocaleString("ru-RU"), text: "Автоматический импорт из Telegram-бота", user: "Бот" }] };
    setLeads(ls => [lead, ...ls]);
  };

  const selA = { background: "#0f172a", color: "#cbd5e1", border: "1px solid #1e293b", borderRadius: 8, padding: "7px 10px", fontSize: 12 };

  return (
    <div style={{ background: "#060d1a", minHeight: "100vh", fontFamily: "'DM Sans', system-ui, sans-serif", color: "#f1f5f9", display: "flex" }}>
      <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />

      {/* Sidebar */}
      <div style={{ width: 200, background: "#070e1a", borderRight: "1px solid #0f172a", display: "flex", flexDirection: "column", flexShrink: 0, height: "100vh", position: "sticky", top: 0 }}>
        <div style={{ padding: "18px 16px 14px", borderBottom: "1px solid #0f172a" }}>
          <div style={{ fontSize: 17, fontWeight: 800, color: "#f1f5f9", letterSpacing: "-0.03em" }}>Мебель<span style={{ color: "#3b82f6" }}>CRM</span></div>
          <div style={{ fontSize: 11, color: "#334155", marginTop: 2 }}>by AI-powered</div>
        </div>
        <nav style={{ flex: 1, padding: "10px 8px" }}>
          {PAGES.map(p => (
            <button key={p.id} onClick={() => setPage(p.id)} style={{ display: "flex", alignItems: "center", gap: 8, width: "100%", padding: "9px 10px", background: page === p.id ? "#0f172a" : "none", border: page === p.id ? "1px solid #1e293b" : "1px solid transparent", borderRadius: 8, cursor: "pointer", color: page === p.id ? "#f1f5f9" : "#475569", fontSize: 13, fontWeight: page === p.id ? 600 : 400, marginBottom: 2, textAlign: "left" }}>
              {p.id === "all" && "📋"}
              {p.id === "Олег" && <span style={{ width: 8, height: 8, borderRadius: "50%", background: MANAGER_COLORS["Олег"], display: "inline-block" }} />}
              {p.id === "Дима" && <span style={{ width: 8, height: 8, borderRadius: "50%", background: MANAGER_COLORS["Дима"], display: "inline-block" }} />}
              {p.id === "Патрик" && <span style={{ width: 8, height: 8, borderRadius: "50%", background: MANAGER_COLORS["Патрик"], display: "inline-block" }} />}
              {p.id === "calendar" && "📅"}
              {p.id === "analytics" && "📊"}
              {p.label}
              {["Олег", "Дима", "Патрик"].includes(p.id) && <span style={{ marginLeft: "auto", fontSize: 11, background: "#0f172a", border: "1px solid #1e293b", borderRadius: 10, padding: "1px 7px", color: "#334155" }}>{leads.filter(l => l.manager === p.id).length}</span>}
            </button>
          ))}
        </nav>
        <div style={{ padding: "12px 8px", borderTop: "1px solid #0f172a" }}>
          <button onClick={() => setShowAI(!showAI)} style={{ display: "flex", alignItems: "center", gap: 8, width: "100%", padding: "9px 10px", background: showAI ? "linear-gradient(135deg, #1e3a5f, #2d1b69)" : "none", border: showAI ? "1px solid #2563eb" : "1px solid transparent", borderRadius: 8, cursor: "pointer", color: showAI ? "#93c5fd" : "#475569", fontSize: 13, fontWeight: 600, textAlign: "left" }}>
            <span style={{ fontSize: 16 }}>✦</span> AI-помощник
          </button>
        </div>
      </div>

      {/* Main */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: "100vh", marginRight: showAI ? 380 : 0, transition: "margin 0.25s" }}>
        {/* Topbar */}
        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderBottom: "1px solid #0f172a", background: "#070e1a", position: "sticky", top: 0, zIndex: 50 }}>
          <input value={search} onChange={e => setSearch(e.target.value)} placeholder="🔍  Поиск по имени, телефону, комментарию..." style={{ flex: 1, background: "#0f172a", border: "1px solid #1e293b", borderRadius: 8, color: "#cbd5e1", padding: "8px 14px", fontSize: 13 }} />
          {page === "all" && <>
            <select value={filter.manager} onChange={e => setFilter(p => ({ ...p, manager: e.target.value }))} style={selA}><option value="">Все менеджеры</option>{MANAGERS.map(m => <option key={m}>{m}</option>)}</select>
            <select value={filter.status} onChange={e => setFilter(p => ({ ...p, status: e.target.value }))} style={selA}><option value="">Все статусы</option>{FINAL_STATUSES.map(s => <option key={s}>{s}</option>)}</select>
            <select value={filter.source} onChange={e => setFilter(p => ({ ...p, source: e.target.value }))} style={selA}><option value="">Все источники</option>{SOURCES.map(s => <option key={s}>{s}</option>)}</select>
          </>}
          <button onClick={simulateTgLead} title="Симулировать новый лид из Telegram" style={{ background: "#0a2240", border: "1px solid #1e3a5f", color: "#60a5fa", padding: "8px 14px", borderRadius: 8, cursor: "pointer", fontSize: 12, fontWeight: 600, whiteSpace: "nowrap" }}>+ TG лид</button>
          {!["calendar", "analytics"].includes(page) && <button onClick={() => setShowAddLead(true)} style={{ background: "#3b82f6", border: "none", color: "#fff", padding: "8px 16px", borderRadius: 8, cursor: "pointer", fontSize: 13, fontWeight: 600, whiteSpace: "nowrap" }}>+ Лид</button>}
        </div>

        {/* Content */}
        <div style={{ flex: 1, padding: 20, overflow: "auto" }}>
          {page === "analytics" && <AnalyticsPage leads={leads} />}
          {page === "calendar" && <CalendarPage events={events} leads={leads} onAddEvent={e => setEvents(p => [e, ...p])} onToggleDone={id => setEvents(p => p.map(e => e.id === id ? { ...e, done: !e.done } : e))} />}
          {!["analytics", "calendar"].includes(page) && (
            <div style={{ background: "#0a1628", border: "1px solid #0f172a", borderRadius: 12, overflow: "hidden" }}>
              <table style={{ width: "100%", borderCollapse: "collapse" }}>
                <thead>
                  <tr style={{ borderBottom: "1px solid #1e293b" }}>
                    {["Клиент", "Источник", "Рейтинг", "Квалификация", "Менеджер", "Статус", "Дата"].map(h => (
                      <th key={h} style={{ padding: "10px 12px", textAlign: "left", fontSize: 11, fontWeight: 700, color: "#334155", letterSpacing: "0.06em" }}>{h.toUpperCase()}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {visibleLeads.map(l => <LeadRow key={l.id} lead={l} onOpen={setSelectedLead} onAssign={handleAssign} />)}
                  {visibleLeads.length === 0 && <tr><td colSpan={7} style={{ textAlign: "center", padding: 40, color: "#334155", fontSize: 14 }}>Нет лидов</td></tr>}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>

      {/* Modals */}
      {selectedLead && <LeadModal lead={selectedLead} onClose={() => setSelectedLead(null)} onSave={handleSaveLead} currentUser={currentUser} />}

      {showAddLead && (
        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.75)", zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center" }} onClick={() => setShowAddLead(false)}>
          <div onClick={e => e.stopPropagation()} style={{ background: "#0a1628", border: "1px solid #1e293b", borderRadius: 14, padding: 24, width: 500 }}>
            <div style={{ fontSize: 16, fontWeight: 700, color: "#f1f5f9", marginBottom: 16 }}>Новый лид</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <Field label="Имя" value={newLead.name} onChange={v => setNewLead(p => ({ ...p, name: v }))} />
              <Field label="Телефон" value={newLead.phone} onChange={v => setNewLead(p => ({ ...p, phone: v }))} />
              <FieldSelect label="Источник" value={newLead.source} onChange={v => setNewLead(p => ({ ...p, source: v }))} options={SOURCES} />
              <Field label="Канал" value={newLead.channel} onChange={v => setNewLead(p => ({ ...p, channel: v }))} />
              <FieldSelect label="Срок покупки" value={newLead.buyTerm} onChange={v => setNewLead(p => ({ ...p, buyTerm: v }))} options={BUY_TERMS} />
              <FieldSelect label="Менеджер" value={newLead.manager} onChange={v => setNewLead(p => ({ ...p, manager: v }))} options={["", ...MANAGERS]} />
              <div>
                <div style={{ fontSize: 11, color: "#475569", fontWeight: 600, marginBottom: 6 }}>РЕЙТИНГ</div>
                <Stars value={newLead.rating} onChange={v => setNewLead(p => ({ ...p, rating: v }))} />
              </div>
              <FieldSelect label="Статус" value={newLead.finalStatus} onChange={v => setNewLead(p => ({ ...p, finalStatus: v }))} options={FINAL_STATUSES} />
              <div style={{ gridColumn: "1/-1" }}>
                <div style={{ fontSize: 11, color: "#475569", fontWeight: 600, marginBottom: 4 }}>КОММЕНТАРИЙ</div>
                <textarea value={newLead.comment} onChange={e => setNewLead(p => ({ ...p, comment: e.target.value }))} rows={2} style={{ width: "100%", background: "#0f172a", border: "1px solid #1e293b", borderRadius: 8, color: "#cbd5e1", padding: "8px 10px", fontSize: 13, resize: "none", fontFamily: "inherit" }} />
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }}>
              <button onClick={() => setShowAddLead(false)} style={{ background: "none", border: "1px solid #1e293b", color: "#94a3b8", padding: "8px 16px", borderRadius: 8, cursor: "pointer", fontSize: 13 }}>Отмена</button>
              <button onClick={handleAddLead} style={{ background: "#3b82f6", border: "none", color: "#fff", padding: "8px 20px", borderRadius: 8, cursor: "pointer", fontSize: 13, fontWeight: 600 }}>Создать</button>
            </div>
          </div>
        </div>
      )}

      {showAI && <AIPanel leads={leads} events={events} onClose={() => setShowAI(false)} />}
    </div>
  );
}