import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { PageHeader, SectionHeader } from "@/components/common/PageHeader";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { notifications as seed } from "@/features/_mock/data";
import type { Notification } from "@/types";
import { Bell, Check, Mail, ShoppingBag, Gavel, Newspaper, Clock, ServerCog } from "lucide-react";

export const Route = createFileRoute("/_public/account/notifications")({
  head: () => ({ meta: [
    { title: "Notifications — Purple Zone Account" },
    { name: "description", content: "Your recent notifications and delivery preferences." },
  ]}),
  component: NotificationsPage,
});

const ICONS: Record<Notification["type"], any> = { message: Mail, purchase: ShoppingBag, expiry: Clock, punishment: Gavel, news: Newspaper, system: ServerCog };

function NotificationsPage() {
  const [items, setItems] = useState<Notification[]>(seed);
  const unread = items.filter((i) => !i.read).length;

  return (
    <div className="space-y-6">
      <PageHeader
        title="Notifications"
        description="Everything happening on your account."
        actions={<Button variant="outline" onClick={() => setItems((xs) => xs.map((x) => ({ ...x, read: true })))}><Check className="mr-1 h-4 w-4" /> Mark all read</Button>}
      />

      <Tabs defaultValue="inbox">
        <TabsList>
          <TabsTrigger value="inbox">Inbox {unread > 0 && <Badge className="ml-2 h-5 gradient-primary text-primary-foreground">{unread}</Badge>}</TabsTrigger>
          <TabsTrigger value="prefs">Preferences</TabsTrigger>
        </TabsList>

        <TabsContent value="inbox" className="mt-4">
          <ul className="divide-y divide-border/60 overflow-hidden rounded-xl border border-border bg-card">
            {items.map((n) => {
              const Icon = ICONS[n.type];
              return (
                <li key={n.id} className={`flex items-start gap-3 px-4 py-3 ${!n.read ? "bg-primary/[0.04]" : ""}`}>
                  <div className="mt-0.5 grid h-9 w-9 shrink-0 place-items-center rounded-md bg-surface-elevated text-secondary"><Icon className="h-4 w-4" /></div>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      <div className="font-medium">{n.title}</div>
                      {!n.read && <span className="h-1.5 w-1.5 rounded-full bg-primary" />}
                    </div>
                    <div className="text-sm text-muted-foreground">{n.body}</div>
                  </div>
                  <div className="text-xs text-muted-foreground">{n.time}</div>
                </li>
              );
            })}
          </ul>
        </TabsContent>

        <TabsContent value="prefs" className="mt-4">
          <div className="rounded-xl border border-border bg-card p-6">
            <SectionHeader title="Delivery" description="Choose what triggers a notification and where." />
            <div className="divide-y divide-border/60">
              {[
                ["Direct messages", "New chat messages"],
                ["Purchases", "Order confirmations, receipts"],
                ["Privilege expiry", "Warnings 3 days before expiry"],
                ["Punishments & appeals", "Status changes"],
                ["News & announcements", "Only major updates"],
                ["System", "Maintenance and outages"],
              ].map(([t, h]) => (
                <div key={t} className="grid grid-cols-1 items-center gap-2 py-3 sm:grid-cols-[1fr_auto_auto_auto]">
                  <div>
                    <div className="font-medium">{t}</div>
                    <div className="text-xs text-muted-foreground">{h}</div>
                  </div>
                  <label className="flex items-center gap-2 text-xs"><Switch defaultChecked /> In-app</label>
                  <label className="flex items-center gap-2 text-xs"><Switch defaultChecked /> Email</label>
                  <label className="flex items-center gap-2 text-xs"><Switch /> Push</label>
                </div>
              ))}
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}