"use client";

import { useBrand } from "@/context/brand-context";
import { LiveSessionsCard } from "@/components/dashboard/LiveSessionsCard";
import { Activity } from "lucide-react";

export default function LiveSessionsPage() {
  const { brand } = useBrand();

  if (!brand) {
    return (
      <div className="flex-1 flex items-center justify-center p-8">
        <p className="text-sm text-slate-400">Select a brand to view live sessions.</p>
      </div>
    );
  }

  return (
    <div className="flex-1 min-h-0 overflow-y-auto">
      <div className="max-w-5xl mx-auto px-6 py-8 space-y-6">
        {/* Page header */}
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-lg bg-emerald-50 border border-emerald-200 flex items-center justify-center">
            <Activity className="w-4 h-4 text-emerald-600" />
          </div>
          <div>
            <h1 className="text-xl font-semibold text-slate-900">Live Sessions</h1>
            <p className="text-sm text-slate-500">
              Real-time behavioral intent scoring for active visitors — auto-refreshes every 30 seconds
            </p>
          </div>
        </div>

        <LiveSessionsCard brandId={brand.id} />

        {/* Score band legend */}
        <div className="rounded-lg border border-slate-100 bg-slate-50 px-5 py-4">
          <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-3">Score Bands</p>
          <div className="grid grid-cols-2 sm:grid-cols-5 gap-3">
            {[
              { label: "Very High", range: "81–100", color: "text-violet-700 bg-violet-50 border-violet-200" },
              { label: "High",      range: "61–80",  color: "text-emerald-700 bg-emerald-50 border-emerald-200" },
              { label: "Moderate",  range: "41–60",  color: "text-amber-700 bg-amber-50 border-amber-200" },
              { label: "Low",       range: "21–40",  color: "text-slate-500 bg-slate-100 border-slate-200" },
              { label: "Very Low",  range: "0–20",   color: "text-slate-400 bg-slate-50 border-slate-100" },
            ].map((b) => (
              <div key={b.label} className={`rounded-lg border px-3 py-2 text-center ${b.color}`}>
                <p className="text-xs font-semibold">{b.label}</p>
                <p className="text-[10px] mt-0.5 opacity-70">{b.range}</p>
              </div>
            ))}
          </div>
          <p className="text-xs text-slate-400 mt-3">
            Scores are computed from behavioral signals: time on site, pages viewed, scroll depth, form interactions, phone clicks, and referral channel. Sessions from AI engines and high-converting pages receive additional weight.
          </p>
        </div>
      </div>
    </div>
  );
}
