import { createSignal, For } from "solid-js";
import { Title } from "@solidjs/meta";
import { Sidebar, TopBar, StatCard, ActivityFeed, QuickActions } from "~/components/dashboard";

function AlertsIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 2.5a5.5 5.5 0 00-5.5 5.5v3l-1.5 2v1h14v-1l-1.5-2V8a5.5 5.5 0 00-5.5-5.5z" stroke="currentColor" stroke-width="1.5"/>
      <path d="M8 14.5a2 2 0 004 0" stroke="currentColor" stroke-width="1.5"/>
    </svg>
  );
}

function ShieldIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 2l7 3.5v5c0 5.2-3.5 9.5-7 10.5-3.5-1-7-5.3-7-10.5v-5L10 2z" fill="currentColor" opacity="0.3"/>
      <path d="M10 4l5 2.5v3.5c0 3.7-2.5 6.8-5 7.5-2.5-.7-5-3.8-5-7.5V6.5L10 4z" fill="currentColor"/>
    </svg>
  );
}

function EyeIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 4c-4 0-7.5 2.5-9 6 1.5 3.5 5 6 9 6s7.5-2.5 9-6c-1.5-3.5-5-6-9-6z" stroke="currentColor" stroke-width="1.5"/>
      <circle cx="10" cy="10" r="2.5" stroke="currentColor" stroke-width="1.5"/>
    </svg>
  );
}

function ActivityIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2 10h4l2-5 4 10 2-5h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  );
}

const statCards = [
  { label: "Active Threats", value: "3", trend: "down" as const, trendLabel: "2 fewer than yesterday", icon: AlertsIcon },
  { label: "Protected Accounts", value: "12", trend: "up" as const, trendLabel: "2 new this week", icon: ShieldIcon },
  { label: "Dark Web Scans", value: "1,847", trend: "up" as const, trendLabel: "12% increase", icon: EyeIcon },
  { label: "Alerts Today", value: "7", trend: "down" as const, trendLabel: "3 fewer than yesterday", icon: ActivityIcon },
];

const activities = [
  { id: "1", title: "New credential leak detected", description: "Your email was found in a data breach on a dark web forum", timestamp: "5m ago", type: "alert" as const },
  { id: "2", title: "VoicePrint scan completed", description: "No deepfake voice activity detected in the last 24 hours", timestamp: "1h ago", type: "success" as const },
  { id: "3", title: "RemoveBroker opt-out confirmed", description: "Your data has been removed from Whitepages", timestamp: "3h ago", type: "info" as const },
  { id: "4", title: "Suspicious call blocked", description: "SpamShield blocked a call from an known scam number", timestamp: "6h ago", type: "warning" as const },
  { id: "5", title: "HomeTitle alert", description: "A document was filed against your property address", timestamp: "1d ago", type: "alert" as const },
];

const quickActions = [
  { label: "Run Scan", href: "/dashboard/darkwatch", icon: () => <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 2l7 3.5v5c0 5.2-3.5 9.5-7 10.5-3.5-1-7-5.3-7-10.5v-5L10 2z" fill="currentColor"/></svg> },
  { label: "View Alerts", href: "/dashboard", icon: () => <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 2.5A5.5 5.5 0 004.5 8v3l-1.5 2v1h14v-1l-1.5-2V8A5.5 5.5 0 0010 2.5z" stroke="currentColor" stroke-width="1.5"/></svg> },
  { label: "Add Member", href: "/dashboard/settings", icon: () => <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M14 6a3 3 0 11-6 0 3 3 0 016 0zM4 17c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke="currentColor" stroke-width="1.5"/></svg> },
  { label: "Run Report", href: "/dashboard", icon: () => <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 2h8l4 4v12H4V2z" stroke="currentColor" stroke-width="1.5"/><path d="M8 8h4M8 11h4M8 14h2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> },
];

export default function DashboardPage() {
  const [sidebarOpen, setSidebarOpen] = createSignal(false);

  return (
    <div class="flex h-[calc(100vh-4rem)] bg-[var(--color-bg)]">
      <Title>Dashboard — ShieldAI</Title>
      <Sidebar open={sidebarOpen()} onClose={() => setSidebarOpen(false)} />
      <div class="flex-1 flex flex-col min-w-0">
        <TopBar onMenuToggle={() => setSidebarOpen(v => !v)} />
        <main class="flex-1 overflow-y-auto p-6">
          <div class="max-w-7xl mx-auto">
            <h1 class="text-2xl font-bold text-[var(--color-text-primary)] mb-6">Overview</h1>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
              <For each={statCards}>
                {(card) => (
                  <StatCard
                    label={card.label}
                    value={card.value}
                    trend={card.trend}
                    trendLabel={card.trendLabel}
                    icon={card.icon}
                  />
                )}
              </For>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <ActivityFeed activities={activities} class="lg:col-span-2" />
              <QuickActions actions={quickActions} />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}
