"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { useTransition } from "react";

import { CategoryComparisonChart } from "@/components/portal/charts/CategoryComparisonChart";
import { ImpressionsTrendChart } from "@/components/portal/charts/ImpressionsTrendChart";
import { LeadFunnelChart } from "@/components/portal/charts/LeadFunnelChart";
import { TopSearchQueriesChart } from "@/components/portal/charts/TopSearchQueriesChart";
import type { OwnerDashboardData } from "@/lib/owner/dashboard";

const SR = new Intl.NumberFormat("sr-Latn-RS");

function fmtDelta(delta: number | null) {
  if (delta === null) return { label: "—", color: "#64748b" };
  const sign = delta > 0 ? "+" : "";
  const color = delta > 0 ? "#16a34a" : delta < 0 ? "#dc2626" : "#64748b";
  return { label: `${sign}${delta.toFixed(1)}%`, color };
}

function KpiCard({
  title,
  value,
  delta,
  suffix,
}: {
  title: string;
  value: string;
  delta: number | null;
  suffix?: string;
}) {
  const { label, color } = fmtDelta(delta);
  return (
    <div className="partner-app-stat">
      <div className="partner-app-stat-label">{title}</div>
      <div className="partner-app-stat-value">
        {value}
        {suffix ? <span className="ml-1 text-base text-muted-foreground">{suffix}</span> : null}
      </div>
      <div className="mt-2 text-xs font-semibold" style={{ color }}>
        {label} <span className="text-muted-foreground">vs prethodni period</span>
      </div>
    </div>
  );
}

export function OwnerDashboardPanel({ data }: { data: OwnerDashboardData }) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [pending, startTransition] = useTransition();
  const currentPeriod = data.period;

  function setPeriod(period: number) {
    const params = new URLSearchParams(searchParams?.toString() ?? "");
    params.set("period", String(period));
    startTransition(() => {
      router.replace(`?${params.toString()}#owner-dashboard`, { scroll: false });
      router.refresh();
    });
  }

  return (
    <section id="owner-dashboard" className="partner-app-panel space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div>
          <p className="eyebrow">Vaša performansa</p>
          <h2 className="mt-3 font-display text-3xl font-semibold text-foreground">
            Performans dashboard
          </h2>
          <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
            KPI, trendovi i preporuke računati u realnom vremenu na osnovu vašeg saobraćaja na BiznisPortalu.
          </p>
        </div>
        <div
          role="group"
          aria-label="Period"
          className="inline-flex rounded-full border border-border bg-background p-1"
        >
          {[7, 30, 90].map((p) => {
            const active = p === currentPeriod;
            return (
              <button
                key={p}
                type="button"
                disabled={pending}
                onClick={() => setPeriod(p)}
                className={`rounded-full px-4 py-1.5 text-xs font-semibold transition ${
                  active ? "bg-[#c2410c] text-white" : "text-foreground hover:bg-muted"
                }`}
              >
                {p}d
              </button>
            );
          })}
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <KpiCard
          title={`Impresije (${currentPeriod}d)`}
          value={SR.format(data.kpis.impressions.current)}
          delta={data.kpis.impressions.delta}
        />
        <KpiCard
          title={`Klikovi na profil (${currentPeriod}d)`}
          value={SR.format(data.kpis.clicks.current)}
          delta={data.kpis.clicks.delta}
        />
        <KpiCard
          title="CTR"
          value={data.kpis.ctr.current.toFixed(2)}
          suffix="%"
          delta={data.kpis.ctr.delta}
        />
        <KpiCard
          title={`Leadovi (${currentPeriod}d)`}
          value={SR.format(data.kpis.leads.current)}
          delta={data.kpis.leads.delta}
        />
      </div>

      <div className="grid gap-6 xl:grid-cols-2">
        <div className="surface rounded-[1.6rem] p-5">
          <h3 className="text-sm font-semibold uppercase tracking-[0.14em] text-muted-foreground">
            Trend impresija i klikova (90d)
          </h3>
          <div className="mt-4">
            <ImpressionsTrendChart data={data.trend} />
          </div>
        </div>
        <div className="surface rounded-[1.6rem] p-5">
          <h3 className="text-sm font-semibold uppercase tracking-[0.14em] text-muted-foreground">
            Lead funnel
          </h3>
          <div className="mt-4">
            <LeadFunnelChart data={data.funnel} />
          </div>
        </div>
        <div className="surface rounded-[1.6rem] p-5">
          <h3 className="text-sm font-semibold uppercase tracking-[0.14em] text-muted-foreground">
            Top 10 pretraga koje vode do profila
          </h3>
          <div className="mt-4">
            <TopSearchQueriesChart data={data.queries} />
          </div>
        </div>
        <div className="surface rounded-[1.6rem] p-5">
          <h3 className="text-sm font-semibold uppercase tracking-[0.14em] text-muted-foreground">
            Vaš CTR vs prosek
          </h3>
          <div className="mt-4">
            <CategoryComparisonChart data={data.comparison} />
          </div>
        </div>
      </div>

      <div className="grid gap-3 md:grid-cols-3">
        {data.insights.map((insight) => {
          const palette =
            insight.severity === "warn"
              ? "border-amber-300/60 bg-amber-50/60 text-amber-900"
              : insight.severity === "good"
                ? "border-emerald-300/60 bg-emerald-50/60 text-emerald-900"
                : "border-sky-300/60 bg-sky-50/60 text-sky-900";
          return (
            <div key={insight.id} className={`rounded-2xl border p-4 ${palette}`}>
              <div className="text-xs font-bold uppercase tracking-[0.14em] opacity-80">
                {insight.severity === "warn"
                  ? "Pažnja"
                  : insight.severity === "good"
                    ? "Dobro"
                    : "Info"}
              </div>
              <div className="mt-2 text-sm font-semibold">{insight.title}</div>
              <p className="mt-2 text-sm leading-6 opacity-90">{insight.description}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}