"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { TrendingUp, Phone, FileText, Target } from "lucide-react";

interface Data {
  total: number;
  period: string;
  byType: Array<{ type: string; count: number }>;
  byChannel: Array<{ channel: string; count: number }>;
}

export default function ClientConversionsPage() {
  const { brandId } = useParams();
  const [data, setData] = useState<Data | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/api/client-portal/conversions?brandId=${brandId}`)
      .then((r) => r.ok ? r.json() : null)
      .then((d) => setData(d))
      .finally(() => setLoading(false));
  }, [brandId]);

  if (loading) return <div className="flex items-center justify-center h-64"><div className="w-8 h-8 border-4 border-slate-200 border-t-slate-600 rounded-full animate-spin" /></div>;
  if (!data || data.total === 0) return (
    <div className="text-center py-16">
      <Target className="w-12 h-12 text-slate-200 mx-auto mb-3" />
      <p className="text-sm font-semibold text-slate-700">No conversions recorded yet</p>
      <p className="text-xs text-slate-500 mt-1">Conversion data from forms and phone calls will appear here.</p>
    </div>
  );

  const maxChannel = Math.max(1, ...data.byChannel.map((c) => c.count));

  return (
    <div className="space-y-6 max-w-5xl">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Conversions</h1>
        <p className="text-slate-500 text-sm mt-1">Last {data.period} · {data.total} total conversions</p>
      </div>

      {/* By Type */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div className="px-5 py-3.5 border-b border-slate-100 flex items-center gap-2">
          <TrendingUp className="w-4 h-4 text-brand-600" />
          <h2 className="font-bold text-slate-800 text-sm">By Conversion Type</h2>
        </div>
        <div className="divide-y divide-slate-100">
          {data.byType.map((t) => {
            const isPhone = t.type.startsWith("phone");
            const Icon = isPhone ? Phone : FileText;
            return (
              <div key={t.type} className="px-5 py-3 flex items-center gap-3">
                <Icon className={`w-4 h-4 ${isPhone ? "text-emerald-600" : "text-brand-600"}`} />
                <span className="text-sm font-semibold text-slate-800 flex-1 capitalize">{t.type.replace(/_/g, " ")}</span>
                <span className="text-sm font-bold text-slate-900 tabular-nums">{t.count}</span>
              </div>
            );
          })}
        </div>
      </div>

      {/* By Channel */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div className="px-5 py-3.5 border-b border-slate-100 flex items-center gap-2">
          <Target className="w-4 h-4 text-brand-600" />
          <h2 className="font-bold text-slate-800 text-sm">By Channel</h2>
        </div>
        <div className="px-5 py-4 space-y-3">
          {data.byChannel.map((c) => {
            const pct = (c.count / maxChannel) * 100;
            return (
              <div key={c.channel} className="flex items-center gap-3">
                <span className="text-xs font-semibold text-slate-700 capitalize w-24 shrink-0">{c.channel.replace(/_/g, " ")}</span>
                <div className="flex-1 h-2.5 bg-slate-100 rounded-full overflow-hidden">
                  <div className="h-full bg-brand-500 rounded-full" style={{ width: `${pct}%` }} />
                </div>
                <span className="text-xs font-bold text-slate-900 tabular-nums w-10 text-right">{c.count}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
