"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Avatar } from "@/components/ui/Avatar";
import { Icon } from "@/components/ui/Icon";
import { PLATFORM_META, STATUSES, PIPELINE_STATUSES, statusMeta, fnum, type PlatformKey } from "@/lib/creators/constants";
import { scoreTone } from "@/lib/creators/score";
import type { CreatorListItem, CreatorDetail } from "@/lib/creators/queries";
import type { DashboardData } from "@/lib/creators/queries";
import type { CreatorStatus } from "@prisma/client";
import { CreatorProfile } from "./CreatorProfile";
import { CreatorDrawer } from "./CreatorDrawer";

type Opt = { id: string; name: string };
type View = "dashboard" | "pipeline" | "list";

const VIEWS: { key: View; label: string; icon: string }[] = [
  { key: "dashboard", label: "Dashboard", icon: "dashboard" },
  { key: "pipeline", label: "Pipeline", icon: "columns" },
  { key: "list", label: "Liste", icon: "list" },
];

export function CreatorsManager({
  creators,
  dashboard,
  managers,
  projects,
  canManage,
  autoPlatforms,
}: {
  creators: CreatorListItem[];
  dashboard: DashboardData;
  managers: Opt[];
  projects: Opt[];
  canManage: boolean;
  autoPlatforms: string[];
}) {
  const router = useRouter();
  const [view, setView] = useState<View>("dashboard");
  const [filter, setFilter] = useState<CreatorStatus | "ALL">("ALL");
  const [q, setQ] = useState("");
  const [detail, setDetail] = useState<CreatorDetail | null>(null);
  const [editing, setEditing] = useState<CreatorDetail | "new" | null>(null);
  const [loadingId, setLoadingId] = useState<string | null>(null);

  const fetchDetail = async (id: string): Promise<CreatorDetail | null> => {
    const res = await fetch(`/api/creators/${id}`, { cache: "no-store" });
    return res.ok ? (await res.json()).creator : null;
  };
  const openDetail = async (id: string) => {
    setLoadingId(id);
    try {
      const c = await fetchDetail(id);
      if (c) setDetail(c);
    } finally {
      setLoadingId(null);
    }
  };
  const reloadDetail = async () => {
    if (detail) {
      const c = await fetchDetail(detail.id);
      if (c) setDetail(c);
    }
    router.refresh();
  };

  const shown = creators.filter(
    (c) => (filter === "ALL" || c.status === filter) && (!q || `${c.name} ${c.stageName ?? ""}`.toLowerCase().includes(q.toLowerCase())),
  );

  return (
    <div className="flex flex-col gap-5">
      <div className="flex flex-wrap items-center justify-between gap-3" data-reveal>
        <div className="segmented">
          {VIEWS.map((v) => (
            <button key={v.key} className="segmented-btn" data-active={view === v.key} onClick={() => setView(v.key)}><Icon name={v.icon} size={15} /> {v.label}</button>
          ))}
        </div>
        {canManage ? <button className="btn btn-primary btn-sm" onClick={() => setEditing("new")}><Icon name="plus" size={15} /> Creator anlegen</button> : null}
      </div>

      {view === "dashboard" ? <DashboardView data={dashboard} creators={creators} onOpen={openDetail} loadingId={loadingId} /> : null}
      {view === "pipeline" ? <PipelineView creators={creators} onOpen={openDetail} loadingId={loadingId} /> : null}
      {view === "list" ? (
        <ListView creators={creators} shown={shown} filter={filter} setFilter={setFilter} q={q} setQ={setQ} onOpen={openDetail} loadingId={loadingId} />
      ) : null}

      {detail ? (
        <CreatorProfile
          creator={detail}
          canManage={canManage}
          autoPlatforms={autoPlatforms}
          onClose={() => setDetail(null)}
          onEdit={() => { const d = detail; setDetail(null); setEditing(d); }}
          onReload={reloadDetail}
        />
      ) : null}

      {editing ? (
        <CreatorDrawer
          creator={editing === "new" ? null : editing}
          managers={managers}
          projects={projects}
          autoPlatforms={autoPlatforms}
          onClose={() => setEditing(null)}
          onSaved={() => { setEditing(null); router.refresh(); }}
        />
      ) : null}
    </div>
  );
}

// ── Dashboard ────────────────────────────────────────────────────────────

function DashboardView({ data, creators, onOpen, loadingId }: { data: DashboardData; creators: CreatorListItem[]; onOpen: (id: string) => void; loadingId: string | null }) {
  const maxPipe = Math.max(1, ...data.pipeline.map((p) => p.count));
  return (
    <div className="flex flex-col gap-5">
      <section className="grid grid-cols-2 gap-4 xl:grid-cols-5" data-reveal>
        <div className="stat-tile"><span className="stat-tile-value">{data.counts.total}</span><span className="stat-tile-label">Creator gesamt</span></div>
        <div className="stat-tile"><span className="stat-tile-value">{data.counts.active}</span><span className="stat-tile-label">Aktiv im Netzwerk</span></div>
        <div className="stat-tile"><span className="stat-tile-value">{data.counts.observing}</span><span className="stat-tile-label">Unter Beobachtung</span></div>
        <div className="stat-tile"><span className="stat-tile-value">{fnum(data.totalReach)}</span><span className="stat-tile-label">Reichweite gesamt</span></div>
        <div className="stat-tile"><span className="stat-tile-value">{data.avgScore}</span><span className="stat-tile-label">Ø Creator-Score</span></div>
      </section>

      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2" data-reveal>
        <div className="card">
          <div className="label mb-3">Pipeline</div>
          <div className="flex flex-col gap-1.5">
            {data.pipeline.map((p) => (
              <div key={p.status} className="pipe-row">
                <span className="pipe-lbl">{p.label}</span>
                <div className="pipe-track"><div className="pipe-fill" style={{ width: `${(p.count / maxPipe) * 100}%`, background: p.color }} /></div>
                <span className="pipe-num">{p.count}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="label mb-3"><Icon name="trending" size={14} /> Stärkstes Wachstum (30 T)</div>
          {data.topGrowth.length === 0 ? <p className="text-muted text-sm">Noch keine Wachstumsdaten.</p> : (
            <div className="flex flex-col gap-2">
              {data.topGrowth.map((c) => (
                <button key={c.id} className="rank-row" onClick={() => onOpen(c.id)} disabled={loadingId === c.id}>
                  <span className="truncate font-semibold">{c.name}</span>
                  <span className="ml-auto text-muted text-xs">{fnum(c.totalFollowers)}</span>
                  <span className="grow grow-up">+{c.growthPct30}%</span>
                </button>
              ))}
            </div>
          )}
        </div>

        <div className="card">
          <div className="label mb-3"><Icon name="activity" size={14} /> Top nach Score</div>
          <div className="flex flex-col gap-2">
            {data.mostActive.map((c) => {
              const tone = scoreTone(c.score);
              return (
                <button key={c.id} className="rank-row" onClick={() => onOpen(c.id)} disabled={loadingId === c.id}>
                  <span className="truncate font-semibold">{c.name}</span>
                  <span className="ml-auto text-muted text-xs">{fnum(c.totalFollowers)}</span>
                  <span className="score-pill" data-tone={tone}>{c.score}</span>
                </button>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="label mb-3"><Icon name="alert" size={14} /> Gefährdet / Beobachtung nötig</div>
          {data.atRisk.length === 0 ? <p className="text-muted text-sm">Aktuell keine Auffälligkeiten. 🎉</p> : (
            <div className="flex flex-col gap-2">
              {data.atRisk.map((c) => (
                <button key={c.id} className="risk-row" onClick={() => onOpen(c.id)} disabled={loadingId === c.id}>
                  <span className="font-semibold">{c.name}</span>
                  <span className="text-muted text-xs">{c.reason}</span>
                </button>
              ))}
            </div>
          )}
        </div>
      </div>

      {data.managers.length ? (
        <div className="card" data-reveal>
          <div className="label mb-3"><Icon name="shield" size={14} /> Creator-Manager-Übersicht</div>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
            {data.managers.map((m) => (
              <div key={m.id} className="mgr-card">
                <div className="font-bold">{m.name}</div>
                <div className="mt-1 flex gap-3 text-xs text-muted">
                  <span><b style={{ color: "var(--text)" }}>{m.total}</b> betreut</span>
                  <span><b style={{ color: "var(--text)" }}>{m.observing}</b> Beob.</span>
                  <span><b style={{ color: "var(--text)" }}>{m.onboarding}</b> Onb.</span>
                  <span><b style={{ color: "var(--text)" }}>{m.active}</b> aktiv</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : null}

      {creators.some((c) => c.insights.some((i) => i.kind === "recommendation")) ? (
        <div className="card" data-reveal>
          <div className="label mb-3"><Icon name="target" size={14} /> Empfehlungen</div>
          <div className="flex flex-col gap-2">
            {creators.flatMap((c) => c.insights.filter((i) => i.kind === "recommendation").map((i, idx) => (
              <button key={`${c.id}-${idx}`} className="insight insight-good" style={{ textAlign: "left" }} onClick={() => onOpen(c.id)}>
                <Icon name="target" size={16} /><span>{i.text}</span>
              </button>
            )))}
          </div>
        </div>
      ) : null}
    </div>
  );
}

// ── Pipeline ─────────────────────────────────────────────────────────────

function PipelineView({ creators, onOpen, loadingId }: { creators: CreatorListItem[]; onOpen: (id: string) => void; loadingId: string | null }) {
  const cols = [...PIPELINE_STATUSES, ...STATUSES.filter((s) => !s.pipeline)];
  return (
    <div className="pipeline-board" data-reveal>
      {cols.map((s) => {
        const items = creators.filter((c) => c.status === s.value);
        return (
          <div key={s.value} className="pipeline-col">
            <div className="pipeline-col-head" style={{ ["--sc" as string]: s.color }}>
              <span className="status-badge-dot" style={{ background: s.color }} />
              <span className="font-semibold">{s.label}</span>
              <span className="badge ml-auto">{items.length}</span>
            </div>
            <div className="pipeline-col-body">
              {items.length === 0 ? <p className="text-muted" style={{ fontSize: 12, padding: "4px 2px" }}>—</p> : items.map((c) => <MiniCard key={c.id} c={c} onOpen={onOpen} loadingId={loadingId} />)}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function MiniCard({ c, onOpen, loadingId }: { c: CreatorListItem; onOpen: (id: string) => void; loadingId: string | null }) {
  const tone = scoreTone(c.score);
  return (
    <button className="pipeline-card" onClick={() => onOpen(c.id)} disabled={loadingId === c.id}>
      <div className="flex items-center gap-2">
        <Avatar name={c.stageName ?? c.name} src={c.avatarUrl} size={30} />
        <span className="truncate text-sm font-semibold flex-1 text-left">{c.stageName ?? c.name}</span>
        <span className="score-pill" data-tone={tone} style={{ transform: "scale(.85)" }}>{c.score}</span>
      </div>
      <div className="mt-1.5 flex items-center gap-2 text-xs text-muted">
        <Icon name="users" size={12} /> {fnum(c.totalFollowers)}
        {c.growthPct30 != null ? <span className={`grow ${c.growthPct30 > 0 ? "grow-up" : c.growthPct30 < 0 ? "grow-down" : ""}`} style={{ marginLeft: "auto" }}>{c.growthPct30 > 0 ? "+" : ""}{Math.round(c.growthPct30)}%</span> : null}
      </div>
    </button>
  );
}

// ── Liste ────────────────────────────────────────────────────────────────

function ListView({
  creators, shown, filter, setFilter, q, setQ, onOpen, loadingId,
}: {
  creators: CreatorListItem[];
  shown: CreatorListItem[];
  filter: CreatorStatus | "ALL";
  setFilter: (s: CreatorStatus | "ALL") => void;
  q: string;
  setQ: (s: string) => void;
  onOpen: (id: string) => void;
  loadingId: string | null;
}) {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center justify-between gap-3" data-reveal>
        <div className="flex flex-wrap items-center gap-2">
          <button className="pill" data-active={filter === "ALL"} onClick={() => setFilter("ALL")}>Alle <span className="badge">{creators.length}</span></button>
          {STATUSES.map((s) => {
            const n = creators.filter((c) => c.status === s.value).length;
            if (n === 0) return null;
            return <button key={s.value} className="pill" data-active={filter === s.value} onClick={() => setFilter(s.value)}><span className="status-badge-dot" style={{ background: s.color }} /> {s.label} <span className="badge">{n}</span></button>;
          })}
        </div>
        <div className="relative">
          <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted"><Icon name="search" size={15} /></span>
          <input className="input" style={{ paddingLeft: 34, width: 210 }} placeholder="Suchen …" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
      </div>

      {shown.length === 0 ? (
        <div className="card" data-reveal><p className="text-muted text-sm">Keine Creator in dieser Ansicht.</p></div>
      ) : (
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3" data-reveal>
          {shown.map((c) => <CreatorCard key={c.id} c={c} onOpen={onOpen} loadingId={loadingId} />)}
        </div>
      )}
    </div>
  );
}

function CreatorCard({ c, onOpen, loadingId }: { c: CreatorListItem; onOpen: (id: string) => void; loadingId: string | null }) {
  const sm = statusMeta(c.status);
  const tone = scoreTone(c.score);
  const warn = c.insights.find((i) => i.tone === "bad");
  return (
    <button className="creator-card" onClick={() => onOpen(c.id)} disabled={loadingId === c.id}>
      <div className="flex items-center gap-3">
        <Avatar name={c.stageName ?? c.name} src={c.avatarUrl} size={46} />
        <div className="min-w-0 flex-1">
          <div className="truncate font-bold">{c.stageName ?? c.name}</div>
          <div className="text-muted truncate text-xs">{c.categoryLabel ?? c.managerName ?? "Kein Manager"}</div>
        </div>
        <span className="score-pill" data-tone={tone}>{c.score}</span>
      </div>
      <div className="mt-2 flex items-center gap-2">
        <span className="status-badge" style={{ borderColor: `${sm.color}55` }}><span className="status-badge-dot" style={{ background: sm.color }} />{sm.label}</span>
        {c.growthPct30 != null ? <span className={`grow ${c.growthPct30 > 0 ? "grow-up" : c.growthPct30 < 0 ? "grow-down" : ""}`}>{c.growthPct30 > 0 ? "+" : ""}{Math.round(c.growthPct30)}%</span> : null}
      </div>
      <div className="creator-card-foot">
        <div className="flex items-center gap-2">
          {c.platforms.map((p) => (
            <span key={p} className="creator-plat-icon" style={{ color: PLATFORM_META[p as PlatformKey]?.color ?? "var(--muted)" }} title={PLATFORM_META[p as PlatformKey]?.label ?? p}><Icon name={p} size={16} /></span>
          ))}
          {c.platforms.length === 0 ? <span className="text-muted text-xs">Keine Plattform</span> : null}
        </div>
        <div className="flex items-center gap-1 text-sm font-bold"><Icon name="users" size={14} /> {fnum(c.totalFollowers)}</div>
      </div>
      {warn ? <div className="card-warn"><Icon name="alert" size={12} /> {warn.text}</div> : null}
    </button>
  );
}