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 { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { Plus, Image as ImageIcon, GripVertical } from "lucide-react";

export const Route = createFileRoute("/admin/banners")({
  head: () => ({ meta: [{ title: "Banners — Admin" }, { name: "description", content: "Promotional banners shown across the platform." }] }),
  component: AdminBannersPage,
});

type Banner = { id: string; title: string; placement: "home_top" | "home_bottom" | "store_top" | "sidebar"; enabled: boolean; from: string; to: string; ctr: number; impressions: number };
const initial: Banner[] = [
  { id: "b1", title: "Summer sale — up to 40% off", placement: "home_top", enabled: true, from: "2026-07-01", to: "2026-08-03", ctr: 4.2, impressions: 12480 },
  { id: "b2", title: "Season 5 is live", placement: "home_bottom", enabled: true, from: "2026-07-18", to: "2026-09-15", ctr: 3.1, impressions: 8214 },
  { id: "b3", title: "Refer a friend — get 200 WGC", placement: "sidebar", enabled: false, from: "2026-06-01", to: "2026-12-31", ctr: 1.8, impressions: 4402 },
  { id: "b4", title: "Bundle: Ultimate", placement: "store_top", enabled: true, from: "2026-07-10", to: "2026-08-10", ctr: 6.4, impressions: 3120 },
];

const PLACE: Record<Banner["placement"], string> = { home_top: "Home top", home_bottom: "Home bottom", store_top: "Store top", sidebar: "Sidebar" };

function AdminBannersPage() {
  const [items, setItems] = useState<Banner[]>(initial);
  const [open, setOpen] = useState(false);

  return (
    <div className="space-y-6">
      <PageHeader
        title="Banners"
        description="Promotional banners shown across the platform."
        actions={
          <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild><Button className="gradient-primary text-primary-foreground"><Plus className="mr-1 h-4 w-4" /> New banner</Button></DialogTrigger>
            <DialogContent>
              <DialogHeader><DialogTitle>Create banner</DialogTitle></DialogHeader>
              <div className="grid gap-3">
                <div className="space-y-1.5"><Label>Title</Label><Input placeholder="Banner title" /></div>
                <div className="space-y-1.5"><Label>Description</Label><Textarea rows={3} placeholder="Optional description" /></div>
                <div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5"><Label>Starts</Label><Input type="date" /></div>
                  <div className="space-y-1.5"><Label>Ends</Label><Input type="date" /></div>
                </div>
              </div>
              <DialogFooter>
                <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
                <Button className="gradient-primary text-primary-foreground" onClick={() => { setOpen(false); toast.success("Banner created"); }}>Create</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        }
      />

      <div className="grid gap-3 lg:grid-cols-2">
        {items.map((b, i) => (
          <div key={b.id} className="rounded-xl border border-border bg-card p-4">
            <div className="flex items-start gap-3">
              <GripVertical className="mt-1 h-4 w-4 cursor-grab text-muted-foreground" />
              <div className="grid h-16 w-24 shrink-0 place-items-center rounded-md bg-surface-elevated text-secondary"><ImageIcon className="h-5 w-5" /></div>
              <div className="min-w-0 flex-1">
                <div className="flex items-center justify-between gap-2">
                  <div className="min-w-0">
                    <div className="truncate font-display text-base font-semibold">{b.title}</div>
                    <div className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
                      <Badge variant="outline">{PLACE[b.placement]}</Badge>
                      <span>{b.from} → {b.to}</span>
                    </div>
                  </div>
                  <Switch checked={b.enabled} onCheckedChange={(v) => setItems((xs) => xs.map((x, j) => j === i ? { ...x, enabled: v } : x))} />
                </div>
                <div className="mt-3 flex items-center gap-4 text-xs text-muted-foreground">
                  <span>Impressions <span className="font-mono text-foreground">{b.impressions.toLocaleString()}</span></span>
                  <span>CTR <span className="font-mono text-foreground">{b.ctr}%</span></span>
                </div>
                <div className="mt-3 flex justify-end gap-1">
                  <Button size="sm" variant="outline">Edit</Button>
                  <Button size="sm" variant="ghost" className="text-destructive">Delete</Button>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}