Blame for src/pages/Dashboard.tsx

import { useQuery, useQueryClient } from "@tanstack/react-query";
import { apiClient } from "../lib/apiClient";
import { 
  Megaphone, 
  Users, 
  Mail, 
  Inbox, 
  Flame, 
  TrendingUp, 
  Sparkles, 
  Activity, 
  Plus, 
  ArrowUpRight, 
  CheckCircle2, 
  ShieldCheck, 
  Radio, 
  Zap 
} from "lucide-react";
import { 
  LineChart, 
  Line, 
  XAxis, 
  YAxis, 
  CartesianGrid, 
  Tooltip, 
  ResponsiveContainer, 
  PieChart, 
  Pie, 
  Cell 
} from "recharts";
import { useState } from "react";
import { Link } from "react-router-dom";
import StatCard from "../components/StatCard";
import StatusBadge from "../components/StatusBadge";
import FormDrawer from "../components/FormDrawer";
import toast from "react-hot-toast";

const lineData = [
  { date: "Day 1", sent: 480, open: 310, reply: 28, bounce: 6 },
  { date: "Day 4", sent: 820, open: 530, reply: 46, bounce: 10 },
  { date: "Day 7", sent: 1250, open: 820, reply: 74, bounce: 14 },
  { date: "Day 10", sent: 1780, open: 1190, reply: 105, bounce: 19 },
  { date: "Day 14", sent: 2420, open: 1650, reply: 148, bounce: 23 },
  { date: "Day 18", sent: 3150, open: 2190, reply: 196, bounce: 31 },
  { date: "Day 22", sent: 4020, open: 2840, reply: 254, bounce: 38 },
  { date: "Day 26", sent: 4980, open: 3510, reply: 312, bounce: 46 },
  { date: "Day 30", sent: 5890, open: 4120, reply: 378, bounce: 52 },
];

const pieData = [
  { name: "Interested", value: 340, color: "var(--nt-success)" },
  { name: "Meeting Booked", value: 160, color: "var(--nt-accent)" },
  { name: "Replied", value: 290, color: "var(--nt-info)" },
  { name: "Not Interested", value: 180, color: "var(--nt-danger)" },
  { name: "Bounced", value: 45, color: "var(--nt-espresso-700)" },
];

export default function Dashboard() {
  const queryClient = useQueryClient();
  const [isCreateCampaignOpen, setIsCreateCampaignOpen] = useState(false);
  const [activeMetric, setActiveMetric] = useState<"all" | "open" | "reply">("all");

  const { data: analytics, isLoading: isAnalyticsLoading, isError: isAnalyticsError } = useQuery({
    queryKey: ["analytics-summary"],
    queryFn: async () => {
      const res = await apiClient.get("/analytics/campaigns");
      return res.data;
    },
  });

  const { data: campaigns, isLoading: isCampaignsLoading, isError: isCampaignsError } = useQuery({
    queryKey: ["campaigns"],
    queryFn: async () => {
      const res = await apiClient.get("/campaigns");
      return res.data;
    },
  });

  const { data: emailAccounts = [], isLoading: isEmailAccountsLoading } = useQuery({
    queryKey: ["email-accounts"],
    queryFn: async () => {
      const res = await apiClient.get("/email-accounts");
      return res.data;
    },
  });

  const warmupDailyCount = emailAccounts.reduce((total: number, account: any) => total + (account.warmup_daily_count || 0), 0);
  const connectedMailboxCount = emailAccounts.filter((account: any) => account.status === "CONNECTED").length;
  const warmupScoreValues = emailAccounts.map((account: any) => account.warmup_score).filter((score: any) => typeof score === "number");
  const averageWarmupScore = warmupScoreValues.length
    ? (warmupScoreValues.reduce((total: number, score: number) => total + score, 0) / warmupScoreValues.length).toFixed(1)
    : null;

  return (
    <div className="p-6 max-w-7xl mx-auto space-y-7">
      {/* Header with Live Status & Quick Action Buttons */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <div className="flex items-center gap-2">
            <h1 className="text-2xl font-bold tracking-tight text-zinc-100 flex items-center gap-2.5">
              Command Center
            </h1>
            <span className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-0.5 rounded-full">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-ping" />
              Live Engine
            </span>
          </div>
          <p className="text-zinc-400 text-sm mt-1">
            Real-time deliverability radar, campaign sequencing, and cold outreach throughput.
          </p>
        </div>

        <div className="flex items-center gap-3">
          <button
            onClick={() => setIsCreateCampaignOpen(true)}
            className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-all shadow-md shadow-indigo-600/20 flex items-center gap-2"
          >
            <Plus className="w-4 h-4" />
            Create Campaign
          </button>
        </div>
      </div>

      {/* High-Impact Stat Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          title="Total Campaigns"
          value={isCampaignsLoading ? "…" : isCampaignsError ? "—" : campaigns?.length ?? 0}
          subtitle="Outbound Sequences"
          icon={Megaphone}
          iconColor="indigo"
          change={{ value: "+2 new", isPositive: true, period: "this week" }}
        />
        <StatCard
          title="Total Leads"
          value={isAnalyticsLoading ? "…" : isAnalyticsError ? "—" : (analytics?.total_leads ?? 0).toLocaleString()}
          subtitle="Prospects Targeted"
          icon={Users}
          iconColor="teal"
          change={{ value: "+380", isPositive: true, period: "last 7 days" }}
        />
        <StatCard
          title="Emails Sent"
          value={isAnalyticsLoading ? "…" : isAnalyticsError ? "—" : (analytics?.total_sent ?? 0).toLocaleString()}
          subtitle="Across All Mailboxes"
          icon={Mail}
          iconColor="blue"
          change={{ value: "+14.8%", isPositive: true, period: "month-over-month" }}
        />
        <StatCard
          title="Avg Reply Rate"
          value={isAnalyticsLoading ? "…" : isAnalyticsError ? "—" : analytics?.reply_rate != null ? `${analytics.reply_rate}%` : "—"}
          subtitle="Deliverability High"
          icon={Inbox}
          iconColor="emerald"
          change={{ value: "+1.2%", isPositive: true, period: "vs benchmark" }}
        />
      </div>

      {/* Deliverability & Mailbox Health Ribbon */}
      <div className="command-signal-ribbon bg-gradient-to-r from-white/5 via-indigo-900/20 to-white/5 border border-white/10 backdrop-blur-md rounded-xl p-4 flex flex-col md:flex-row items-center justify-between gap-4 shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)]">
        <div className="flex items-center gap-3">
          <div className="p-2.5 bg-emerald-500/20 border border-emerald-500/30 rounded-xl text-emerald-300 shadow-[inset_0_1px_1px_rgba(246,248,242,0.1)]">
            <ShieldCheck className="w-5 h-5 drop-shadow-[0_0_8px_rgba(63,156,132,0.5)]" />
          </div>
          <div>
            <h4 className="text-sm font-semibold text-zinc-100 flex items-center gap-2">
              Deliverability & Reputation Guard
              <span className="text-[10px] font-bold uppercase tracking-wider bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 px-2 py-0.5 rounded-full drop-shadow-[0_0_8px_rgba(63,156,132,0.3)]">
                {averageWarmupScore ? `${averageWarmupScore}% Score` : isEmailAccountsLoading ? "Checking score" : "No score"}
              </span>
            </h4>
            <p className="text-xs text-zinc-400 mt-0.5">
              {connectedMailboxCount} connected mailboxes with {warmupDailyCount} daily warmup messages.
            </p>
          </div>
        </div>

        <div className="flex items-center gap-4 text-xs">
          <div className="flex items-center gap-2 bg-black/40 border border-white/5 px-3 py-1.5 rounded-lg shadow-[inset_0_1px_1px_rgba(246,248,242,0.02)]">
            <Flame className="w-4 h-4 text-amber-400 drop-shadow-[0_0_8px_rgba(194,160,74,0.5)]" />
            <span className="text-zinc-300 font-medium font-sans">Warmup:</span>
            <span className="text-amber-400 font-bold font-mono drop-shadow-[0_0_8px_rgba(194,160,74,0.3)]">{warmupDailyCount} daily / {connectedMailboxCount} inboxes</span>
          </div>
          <Link
            to="/warmup"
            className="text-indigo-400 hover:text-indigo-300 font-medium flex items-center gap-1 transition-colors"
          >
            Warmup Center <ArrowUpRight className="w-3.5 h-3.5" />
          </Link>
        </div>
      </div>

      {/* Main Visualizations Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 30-Day Performance Multi-Line Chart */}
        <div className="lg:col-span-2 bg-white/5 border border-white/10 backdrop-blur-md rounded-xl p-5 shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)] flex flex-col">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
            <div>
              <h3 className="text-base font-semibold text-zinc-100 flex items-center gap-2">
                <Activity className="w-4 h-4 text-indigo-400 drop-shadow-[0_0_8px_rgba(37,125,104,0.5)]" />
                Performance Trajectory (30 Days)
              </h3>
              <p className="text-xs text-zinc-400 mt-0.5">
                Sent volume, open rate, and reply convergence.
              </p>
            </div>

            {/* Metric toggles */}
            <div className="flex items-center bg-black/40 p-1 rounded-lg border border-white/5 text-xs shadow-[inset_0_1px_1px_rgba(246,248,242,0.02)]">
              <button
                onClick={() => setActiveMetric("all")}
                className={`px-3 py-1 rounded-md font-medium transition-all duration-300 ${
                  activeMetric === "all" ? "bg-indigo-600 text-white shadow-[0_0_12px_rgba(37,125,104,0.5)]" : "text-zinc-400 hover:text-zinc-200"
                }`}
              >
                All Metrics
              </button>
              <button
                onClick={() => setActiveMetric("open")}
                className={`px-3 py-1 rounded-md font-medium transition-all duration-300 ${
                  activeMetric === "open" ? "bg-emerald-600 text-white shadow-[0_0_12px_rgba(37,125,104,0.5)]" : "text-zinc-400 hover:text-zinc-200"
                }`}
              >
                Opens
              </button>
              <button
                onClick={() => setActiveMetric("reply")}
                className={`px-3 py-1 rounded-md font-medium transition-all duration-300 ${
                  activeMetric === "reply" ? "bg-purple-600 text-white shadow-[0_0_12px_rgba(178,87,49,0.5)]" : "text-zinc-400 hover:text-zinc-200"
                }`}
              >
                Replies
              </button>
            </div>
          </div>

          <div className="h-[300px] w-full">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={lineData} margin={{ top: 5, right: 10, bottom: 5, left: -10 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="rgba(246,248,242,0.05)" vertical={false} />
                <XAxis dataKey="date" stroke="var(--nt-text-muted)" fontSize={12} tickLine={false} axisLine={false} />
                <YAxis stroke="var(--nt-text-muted)" fontSize={12} tickLine={false} axisLine={false} className="font-mono" />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "rgba(6, 10, 12, 0.88)",
                    backdropFilter: "blur(12px)",
                    borderColor: "rgba(37,125,104,0.2)",
                    borderRadius: "12px",
                    color: "var(--nt-text-primary)",
                    fontSize: "12px",
                  }}
                />
                {(activeMetric === "all" || activeMetric === "open") && (
                  <Line
                    type="monotone"
                    dataKey="sent"
                    name="Sent"
                     stroke="var(--nt-deep-teal-600)"
                    strokeWidth={3}
                     dot={{ r: 4, fill: "var(--nt-deep-teal-600)", strokeWidth: 2, stroke: "var(--nt-focus-ring-offset)" }}
                     activeDot={{ r: 6, fill: "var(--nt-deep-teal-700)" }}
                    animationDuration={1500}
                  />
                )}
                {(activeMetric === "all" || activeMetric === "open") && (
                  <Line
                    type="monotone"
                    dataKey="open"
                    name="Opens"
                     stroke="var(--nt-deep-teal-500)"
                    strokeWidth={3}
                     dot={{ r: 4, fill: "var(--nt-deep-teal-500)", strokeWidth: 2, stroke: "var(--nt-focus-ring-offset)" }}
                     activeDot={{ r: 6, fill: "var(--nt-deep-teal-700)" }}
                    animationDuration={1500}
                  />
                )}
                {(activeMetric === "all" || activeMetric === "reply") && (
                  <Line
                    type="monotone"
                    dataKey="reply"
                    name="Replies"
                     stroke="var(--nt-terracotta-500)"
                    strokeWidth={3}
                     dot={{ r: 4, fill: "var(--nt-terracotta-500)", strokeWidth: 2, stroke: "var(--nt-focus-ring-offset)" }}
                     activeDot={{ r: 6, fill: "var(--nt-terracotta-700)" }}
                    animationDuration={1500}
                  />
                )}
                {activeMetric === "all" && (
                  <Line
                    type="monotone"
                    dataKey="bounce"
                    name="Bounces"
                    stroke="var(--nt-danger)"
                    strokeWidth={2}
                    strokeDasharray="4 4"
                    dot={false}
                    animationDuration={1500}
                  />
                )}
              </LineChart>
            </ResponsiveContainer>
          </div>

          <div className="mt-4 pt-3 border-t border-white/5 flex items-center justify-between text-xs text-zinc-400">
            <div className="flex items-center gap-4 font-sans">
              <span className="flex items-center gap-1.5">
                <span className="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(63,156,132,0.8)]" /> Sent
              </span>
              <span className="flex items-center gap-1.5">
                <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(37,125,104,0.8)]" /> Opens
              </span>
              <span className="flex items-center gap-1.5">
                <span className="w-2.5 h-2.5 rounded-full bg-purple-500 shadow-[0_0_8px_rgba(178,87,49,0.8)]" /> Replies
              </span>
              <span className="flex items-center gap-1.5">
                <span className="w-2.5 h-2.5 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(203,117,80,0.8)]" /> Bounces
              </span>
            </div>
            <Link to="/analytics" className="text-indigo-400 hover:text-indigo-300 font-medium">
              View Detailed Analytics →
            </Link>
          </div>
        </div>

        {/* Lead Status Distribution Donut */}
        <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-xl p-5 shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)] flex flex-col justify-between">
          <div>
            <h3 className="text-base font-semibold text-zinc-100 flex items-center gap-2">
              <Zap className="w-4 h-4 text-amber-400 drop-shadow-[0_0_8px_rgba(194,160,74,0.5)]" />
              Lead Intent Distribution
            </h3>
            <p className="text-xs text-zinc-400 mt-0.5">Classification of prospect responses.</p>
          </div>

          <div className="relative h-[220px] w-full flex items-center justify-center my-2">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={pieData}
                  innerRadius={65}
                  outerRadius={95}
                  paddingAngle={4}
                  dataKey="value"
                  stroke="none"
                  animationDuration={1500}
                >
                  {pieData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip
                  contentStyle={{
                    backgroundColor: "rgba(6, 10, 12, 0.88)",
                    backdropFilter: "blur(12px)",
                    borderColor: "rgba(37,125,104,0.2)",
                    borderRadius: "12px",
                    fontSize: "12px",
                  }}
                />
              </PieChart>
            </ResponsiveContainer>
            <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none drop-shadow-[0_0_12px_rgba(246,248,242,0.3)]">
              <span className="text-2xl font-bold text-white font-mono">1,015</span>
              <span className="text-[10px] uppercase tracking-wider text-zinc-400 font-medium font-sans">
                Classified
              </span>
            </div>
          </div>

          <div className="space-y-1.5 pt-3 border-t border-white/5 text-xs font-sans">
            {pieData.map((item) => (
              <div key={item.name} className="flex items-center justify-between text-zinc-300">
                <span className="flex items-center gap-2">
                  <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: item.color, boxShadow: `0 0 8px ${item.color}` }} />
                  {item.name}
                </span>
                <span className="font-semibold text-zinc-200 font-mono">{item.value}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Active Campaigns Overview Table */}
      <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-xl overflow-hidden shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)]">
        <div className="px-6 py-4 border-b border-white/5 flex items-center justify-between bg-white/[0.02]">
          <div>
            <h3 className="text-base font-semibold text-zinc-100 flex items-center gap-2">
              <Radio className="w-4 h-4 text-indigo-400 drop-shadow-[0_0_8px_rgba(37,125,104,0.5)]" />
              Active Outreach Sequences
            </h3>
            <p className="text-xs text-zinc-400 mt-0.5">
              Live status, recipient quotas, and response metrics.
            </p>
          </div>
          <Link
            to="/campaigns"
            className="text-xs font-semibold text-indigo-400 hover:text-indigo-300 transition-colors"
          >
            Manage Campaigns →
          </Link>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full text-sm text-left">
            <thead className="bg-black/20 border-b border-white/5 text-zinc-400 text-xs uppercase">
              <tr>
                <th className="px-6 py-3 font-medium">Campaign</th>
                <th className="px-6 py-3 font-medium">Status</th>
                <th className="px-6 py-3 font-medium">Leads</th>
                <th className="px-6 py-3 font-medium">Sent</th>
                <th className="px-6 py-3 font-medium">Opens</th>
                <th className="px-6 py-3 font-medium">Replies</th>
                <th className="px-6 py-3 font-medium text-right">Action</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-white/5">
              {(Array.isArray(campaigns) ? campaigns : []).map((camp: any) => (
                <tr key={camp.id} className="hover:bg-white/5 transition-colors">
                  <td className="px-6 py-4 font-semibold text-zinc-100">
                    <Link to={`/campaigns/${camp.id}`} className="hover:text-indigo-400 transition-colors">
                      {camp.name}
                    </Link>
                    <div className="text-[11px] text-zinc-400 font-normal mt-0.5 font-sans">
                      {camp.timezone} • {camp.sequences?.length || 1} step sequence
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <StatusBadge status={camp.status} />
                  </td>
                  <td className="px-6 py-4 text-zinc-300 font-mono">{camp.lead_count || 0}</td>
                  <td className="px-6 py-4 text-zinc-300 font-mono">{camp.sent_count || 0}</td>
                  <td className="px-6 py-4 text-emerald-400 font-mono drop-shadow-[0_0_8px_rgba(63,156,132,0.3)]">{camp.open_count || 0}</td>
                  <td className="px-6 py-4 text-purple-400 font-mono font-semibold drop-shadow-[0_0_8px_rgba(178,87,49,0.3)]">{camp.reply_count || 0}</td>
                  <td className="px-6 py-4 text-right">
                    <Link
                      to={`/campaigns/${camp.id}`}
                      className="px-3 py-1.5 bg-white/5 hover:bg-white/10 text-zinc-200 text-xs font-medium rounded-lg border border-white/5 transition-all inline-flex items-center gap-1 shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]"
                    >
                      Inspect <ArrowUpRight className="w-3 h-3" />
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Quick Campaign Creator Slide-Over Drawer */}
      <FormDrawer
        isOpen={isCreateCampaignOpen}
        onClose={() => setIsCreateCampaignOpen(false)}
        title="Create New Campaign"
        subtitle="Configure schedule, tracking domains, and email sequence steps."
      >
        <form
          onSubmit={async (e) => {
            e.preventDefault();
            const form = e.target as HTMLFormElement;
            const name = (form.elements.namedItem("name") as HTMLInputElement).value;
            const timezone = (form.elements.namedItem("timezone") as HTMLSelectElement).value;
            const initial_subject = (form.elements.namedItem("subject") as HTMLInputElement).value;
            const initial_body = (form.elements.namedItem("body") as HTMLTextAreaElement).value;

            try {
              await apiClient.post("/campaigns", {
                name,
                timezone,
                initial_subject,
                initial_body,
                track_settings: "TRACK_EMAIL_OPEN_AND_CLICK",
              });
              await queryClient.invalidateQueries({ queryKey: ["campaigns"] });
              toast.success("Campaign created successfully");
              setIsCreateCampaignOpen(false);
            } catch (err: any) {
              toast.error(err.message || "Failed to create campaign");
            }
          }}
          className="space-y-4 text-sm"
        >
          <div>
            <label className="block font-medium text-zinc-300 mb-1">Campaign Name</label>
            <input
              name="name"
              required
              placeholder="e.g. Q4 Tech VP Outreach"
              className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500"
            />
          </div>

          <div>
            <label className="block font-medium text-zinc-300 mb-1">Timezone</label>
            <select
              name="timezone"
              defaultValue="America/New_York"
              className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500"
            >
              <option value="America/New_York">Eastern Time (US & Canada)</option>
              <option value="America/Chicago">Central Time (US & Canada)</option>
              <option value="America/Los_Angeles">Pacific Time (US & Canada)</option>
              <option value="Europe/London">London (GMT)</option>
              <option value="Europe/Paris">Central European Time (CET)</option>
              <option value="Asia/Singapore">Singapore (SGT)</option>
            </select>
          </div>

          <div>
            <label className="block font-medium text-zinc-300 mb-1">Step 1: Subject Line</label>
            <input
              name="subject"
              required
              defaultValue="Question about {{company_name}}'s pipeline"
              className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500"
            />
          </div>

          <div>
            <label className="block font-medium text-zinc-300 mb-1">Step 1: Email Body</label>
            <textarea
              name="body"
              rows={4}
              required
              defaultValue="Hi {{first_name}},\n\nWanted to reach out and see if you are exploring new outbound channels this quarter?\n\nBest,\nAlex"
              className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500 font-mono text-xs"
            />
          </div>

          <div className="pt-4 flex justify-end gap-3">
            <button
              type="button"
              onClick={() => setIsCreateCampaignOpen(false)}
              className="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-lg shadow-md"
            >
              Create Campaign
            </button>
          </div>
        </form>
      </FormDrawer>
    </div>
  );
}