"use client";
import Link from "next/link";
import {
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  AreaChart,
  Area,
  BarChart,
  Bar,
} from "recharts";
import {
  Users,
  CreditCard,
  ShoppingCart,
  Activity,
  ArrowUpRight,
  MoreHorizontal,
  CalendarCheck,
} from "lucide-react";

type DashboardData = {
  stats: {
    totalCompanies: number;
    activeAccess: number;
    totalQuotes: number;
    totalOrders: number;
    totalRevenue: number;
    mmr?: number;
    annualRevenue?: number;
  };
  recentCompanies: Array<{
    id: string;
    name: string | null;
    email: string;
    plan_name: string | null;
    status: string | null;
    created_at: string | null;
    expires_at: string | null;
  }>;
  chartData: {
    revenue: Array<{ date: string; amount: number }>;
    newUsers: Array<{ date: string; count: number }>;
  };
};

function formatMoney(value: number) {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
  }).format(value);
}

type CustomTooltipProps = {
  active?: boolean;
  payload?: Array<{ name?: string; value?: number }>;
  label?: string;
};

function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
  if (active && payload && payload.length) {
    return (
      <div className="rounded-lg border border-slate-200 bg-white p-3 shadow-lg">
        <p className="mb-1 text-xs font-medium text-slate-500">{label}</p>
        <p className="text-sm font-bold text-slate-900">
          {payload[0].name === "Receita"
            ? formatMoney(payload[0].value || 0)
            : payload[0].value}
        </p>
      </div>
    );
  }
  return null;
}

export default function DashboardClient({ data }: { data: DashboardData }) {
  const { stats, recentCompanies, chartData } = data;

  return (
    <div className="min-h-screen bg-slate-50/50 p-6 sm:p-8 font-sans">
      <div className="mx-auto flex max-w-[1600px] flex-col gap-8">
        
        {/* Header */}
        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-2xl font-bold tracking-tight text-slate-900">
              Visão Geral
            </h1>
            <p className="text-slate-500">
              Acompanhe o desempenho da plataforma em tempo real.
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-3">
            <span className="hidden text-xs font-medium text-slate-500 sm:block">
              Atualizado hoje
            </span>
            <Link
               href="/catalogs"
               className="inline-flex items-center justify-center rounded-xl bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
            >
              Ver Catálogos
            </Link>
            <Link
               href="/banners-patrocinados"
               className="inline-flex items-center justify-center rounded-xl bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
            >
              Banners
            </Link>
            <Link
               href="/fornecedores-patrocinados"
               className="inline-flex items-center justify-center rounded-xl bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
            >
              Fornecedores
            </Link>
            <Link
               href="/tarjas-informativas"
               className="inline-flex items-center justify-center rounded-xl bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
            >
              Tarjas
            </Link>
            <Link
               href="/boletins"
               className="inline-flex items-center justify-center rounded-xl bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
            >
              Boletins
            </Link>
            <Link
               href="/popups"
               className="inline-flex items-center justify-center rounded-xl bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
            >
              Popups
            </Link>
            <Link
               href="/modelos-da-comunidade"
               className="inline-flex items-center justify-center rounded-xl bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
            >
              Modelos da comunidade
            </Link>
            <Link
               href="/aprender"
               className="inline-flex items-center justify-center rounded-xl bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
            >
              Aprender
            </Link>
            <Link
               href="/notas-fiscais"
               className="inline-flex items-center justify-center rounded-xl bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
            >
              Notas fiscais
            </Link>
            <Link
               href="/ktalogu-live"
               className="inline-flex items-center justify-center rounded-xl bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
            >
              KtaloguLive
            </Link>
            <Link
               href="/companies"
               className="inline-flex items-center justify-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-slate-800 transition-all active:scale-95"
            >
              Gerenciar Empresas
            </Link>
          </div>
        </div>

        {/* KPI Cards */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <div className="group relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 transition-all hover:shadow-md">
            <div className="flex items-center justify-between">
              <div className="rounded-lg bg-blue-50 p-2 text-blue-600">
                <Users size={20} />
              </div>
              <span className="flex items-center text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">
                <ArrowUpRight size={14} className="mr-1" />
                +12%
              </span>
            </div>
            <div className="mt-4">
              <p className="text-sm font-medium text-slate-500">Total Empresas</p>
              <h3 className="text-2xl font-bold text-slate-900">
                {stats.totalCompanies}
              </h3>
            </div>
          </div>

          <div className="group relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 transition-all hover:shadow-md">
            <div className="flex items-center justify-between">
              <div className="rounded-lg bg-emerald-50 p-2 text-emerald-600">
                <CreditCard size={20} />
              </div>
              <span className="flex items-center text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">
                <ArrowUpRight size={14} className="mr-1" />
                +8.2%
              </span>
            </div>
            <div className="mt-4">
              <p className="text-sm font-medium text-slate-500">MMR (Mensal)</p>
              <h3 className="text-2xl font-bold text-slate-900">
                {formatMoney(stats.mmr || 0)}
              </h3>
              <p className="text-xs text-slate-400 mt-1">
                 Apenas planos mensais ativos
              </p>
            </div>
          </div>

          <div className="group relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 transition-all hover:shadow-md">
            <div className="flex items-center justify-between">
              <div className="rounded-lg bg-purple-50 p-2 text-purple-600">
                <CalendarCheck size={20} />
              </div>
              <span className="flex items-center text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">
                <ArrowUpRight size={14} className="mr-1" />
                +5%
              </span>
            </div>
            <div className="mt-4">
              <p className="text-sm font-medium text-slate-500">Planos Anuais (Valor)</p>
              <h3 className="text-2xl font-bold text-slate-900">
                {formatMoney(stats.annualRevenue || 0)}
              </h3>
               <p className="text-xs text-slate-400 mt-1">
                 Total em contratos ativos
              </p>
            </div>
          </div>

          <div className="group relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 transition-all hover:shadow-md">
            <div className="flex items-center justify-between">
              <div className="rounded-lg bg-amber-50 p-2 text-amber-600">
                <ShoppingCart size={20} />
              </div>
              <span className="flex items-center text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">
                <ArrowUpRight size={14} className="mr-1" />
                +24%
              </span>
            </div>
            <div className="mt-4">
              <p className="text-sm font-medium text-slate-500">Pedidos</p>
              <h3 className="text-2xl font-bold text-slate-900">
                {stats.totalOrders}
              </h3>
            </div>
          </div>
        </div>

        {/* Charts Section */}
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
          {/* Revenue Chart */}
          <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm lg:col-span-2">
            <div className="mb-6 flex items-center justify-between">
              <div>
                <h3 className="text-lg font-bold text-slate-900">Receita (Pedidos Pagos)</h3>
                <p className="text-sm text-slate-500">Últimos 30 dias</p>
              </div>
              <div className="flex items-center gap-2">
                 <div className="h-2 w-2 rounded-full bg-emerald-500"></div>
                 <span className="text-xs font-medium text-slate-600">Faturamento</span>
              </div>
            </div>
            <div className="h-[300px] w-full">
              <ResponsiveContainer width="100%" height="100%">
                <AreaChart
                  data={chartData.revenue}
                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
                >
                  <defs>
                    <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="#10b981" stopOpacity={0.1} />
                      <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
                    </linearGradient>
                  </defs>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
                  <XAxis
                    dataKey="date"
                    axisLine={false}
                    tickLine={false}
                    tick={{ fontSize: 12, fill: "#64748b" }}
                    dy={10}
                    tickFormatter={(value: string) => value.split("/").slice(0, 2).join("/")}
                  />
                  <YAxis
                    axisLine={false}
                    tickLine={false}
                    tick={{ fontSize: 12, fill: "#64748b" }}
                    tickFormatter={(value: number) =>
                      new Intl.NumberFormat("pt-BR", {
                        notation: "compact",
                        compactDisplay: "short",
                      }).format(value)
                    }
                  />
                  <Tooltip content={<CustomTooltip />} />
                  <Area
                    type="monotone"
                    dataKey="amount"
                    name="Receita"
                    stroke="#10b981"
                    strokeWidth={2}
                    fillOpacity={1}
                    fill="url(#colorRevenue)"
                  />
                </AreaChart>
              </ResponsiveContainer>
            </div>
          </div>

          {/* New Users Chart */}
          <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
            <div className="mb-6">
              <h3 className="text-lg font-bold text-slate-900">Novas Empresas</h3>
              <p className="text-sm text-slate-500">Últimos 30 dias</p>
            </div>
            <div className="h-[300px] w-full">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={chartData.newUsers}
                  margin={{ top: 10, right: 10, left: -20, bottom: 0 }}
                >
                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
                  <XAxis
                    dataKey="date"
                    axisLine={false}
                    tickLine={false}
                    tick={{ fontSize: 12, fill: "#64748b" }}
                    dy={10}
                    interval={2} // Show fewer labels on small chart
                  />
                  <YAxis
                    axisLine={false}
                    tickLine={false}
                    tick={{ fontSize: 12, fill: "#64748b" }}
                    allowDecimals={false}
                  />
                  <Tooltip content={<CustomTooltip />} cursor={{ fill: "#f8fafc" }} />
                  <Bar
                    dataKey="count"
                    name="Novas Empresas"
                    fill="#3b82f6"
                    radius={[4, 4, 0, 0]}
                    barSize={20}
                  />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>

        {/* Recent Companies & Quick Actions */}
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-[2fr_1fr]">
          <div className="flex flex-col gap-4">
             <div className="flex items-center justify-between">
                <h3 className="text-lg font-bold text-slate-900">Últimos Cadastros</h3>
                <Link href="/companies" className="text-sm font-medium text-blue-600 hover:text-blue-500">
                   Ver todos
                </Link>
             </div>
             
             <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
                <div className="overflow-x-auto">
                   <table className="min-w-full text-sm">
                      <thead>
                         <tr className="border-b border-slate-100 bg-slate-50/50 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">
                            <th className="px-6 py-4">Empresa</th>
                            <th className="px-6 py-4">Plano</th>
                            <th className="px-6 py-4">Status</th>
                            <th className="px-6 py-4 text-right">Ações</th>
                         </tr>
                      </thead>
                      <tbody className="divide-y divide-slate-100">
                         {recentCompanies.map((company) => {
                            const statusColor = company.status === 'active' 
                               ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20' 
                               : 'bg-slate-100 text-slate-700 ring-slate-600/20';
                            
                            return (
                               <tr key={company.id} className="group hover:bg-slate-50/50 transition-colors">
                                  <td className="px-6 py-4">
                                     <div className="flex flex-col">
                                        <span className="font-medium text-slate-900">{company.name || "Sem nome"}</span>
                                        <span className="text-xs text-slate-500">{company.email}</span>
                                     </div>
                                  </td>
                                  <td className="px-6 py-4 text-slate-600">{company.plan_name || "-"}</td>
                                  <td className="px-6 py-4">
                                     <span className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${statusColor}`}>
                                        {company.status === 'active' ? 'Ativo' : 'Inativo'}
                                     </span>
                                  </td>
                                  <td className="px-6 py-4 text-right">
                                     <button className="text-slate-400 hover:text-slate-600">
                                        <MoreHorizontal size={16} />
                                     </button>
                                  </td>
                               </tr>
                            );
                         })}
                      </tbody>
                   </table>
                </div>
             </div>
          </div>

          <div className="flex flex-col gap-6">
             <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
                <h3 className="font-bold text-slate-900">Status do Sistema</h3>
                <div className="mt-4 space-y-4">
                   <div className="flex items-center justify-between">
                      <span className="flex items-center gap-2 text-sm text-slate-600">
                         <Activity size={16} className="text-emerald-500" />
                         API
                      </span>
                      <span className="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">Operacional</span>
                   </div>
                   <div className="flex items-center justify-between">
                      <span className="flex items-center gap-2 text-sm text-slate-600">
                         <Activity size={16} className="text-emerald-500" />
                         Banco de Dados
                      </span>
                      <span className="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">Operacional</span>
                   </div>
                   <div className="flex items-center justify-between">
                      <span className="flex items-center gap-2 text-sm text-slate-600">
                         <Activity size={16} className="text-emerald-500" />
                         Storage
                      </span>
                      <span className="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">Operacional</span>
                   </div>
                </div>
             </div>

             <div className="rounded-2xl bg-gradient-to-br from-slate-900 to-slate-800 p-6 text-white shadow-lg">
                <h3 className="font-bold">Dica do Dia</h3>
                <p className="mt-2 text-sm text-slate-300">
                   Revise as empresas inativas para tentar reativá-las com ofertas especiais.
                </p>
                <button className="mt-4 w-full rounded-lg bg-white/10 py-2 text-sm font-medium hover:bg-white/20 transition-colors">
                   Ver Inativos
                </button>
             </div>
          </div>
        </div>
      </div>
    </div>
  );
}