import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { MEDIA_LIBRARY } from "@/lib/campaign-data";
import { Image as ImageIcon, Video, Mic, Upload, Search, MoreHorizontal } from "lucide-react";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/campaigns/media")({
  component: MediaLibrary,
});

const filters = [
  { id: "all", label: "All assets" },
  { id: "image", label: "Images" },
  { id: "video", label: "Videos" },
  { id: "voice", label: "Voice notes" },
] as const;

function MediaLibrary() {
  const [filter, setFilter] = useState<(typeof filters)[number]["id"]>("all");
  const items = MEDIA_LIBRARY.filter((m) => filter === "all" || m.type === filter);

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-2">
        <div className="relative flex-1 min-w-[200px] max-w-sm">
          <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
          <Input placeholder="Search assets…" className="pl-8 h-9" />
        </div>
        <div className="flex items-center gap-1 rounded-md border p-0.5">
          {filters.map((f) => (
            <button
              key={f.id}
              onClick={() => setFilter(f.id)}
              className={cn(
                "px-2.5 py-1 text-xs rounded-sm transition-colors",
                filter === f.id
                  ? "bg-primary text-primary-foreground"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              {f.label}
            </button>
          ))}
        </div>
        <div className="flex-1" />
        <Button size="sm" className="gap-1.5">
          <Upload className="h-3.5 w-3.5" /> Upload
        </Button>
      </div>

      <Card>
        <CardContent className="p-4">
          <div className="grid gap-3 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
            <UploadCard />
            {items.map((m) => (
              <AssetCard key={m.id} asset={m} />
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

function UploadCard() {
  return (
    <button
      type="button"
      className="aspect-square rounded-lg border-2 border-dashed border-border hover:border-primary/40 hover:bg-primary/5 transition-colors flex flex-col items-center justify-center gap-1.5 text-xs text-muted-foreground"
    >
      <Upload className="h-5 w-5" />
      <span>Drag or upload</span>
      <span className="text-[10px]">JPG · MP4 · MP3 · 50MB</span>
    </button>
  );
}

function AssetCard({ asset }: { asset: (typeof MEDIA_LIBRARY)[number] }) {
  const Icon = asset.type === "image" ? ImageIcon : asset.type === "video" ? Video : Mic;
  const tint =
    asset.type === "image"
      ? "from-sky-500/20 to-sky-500/0"
      : asset.type === "video"
        ? "from-violet-500/20 to-violet-500/0"
        : "from-emerald-500/20 to-emerald-500/0";
  return (
    <div className="group rounded-lg border overflow-hidden bg-card hover:border-primary/40 transition-colors">
      <div className={cn("aspect-square bg-gradient-to-br grid place-items-center relative", tint)}>
        <Icon className="h-8 w-8 text-foreground/40" />
        {asset.duration && (
          <Badge variant="secondary" className="absolute bottom-1.5 right-1.5 text-[9px]">
            {asset.duration}
          </Badge>
        )}
        <Button
          variant="secondary"
          size="icon"
          className="h-6 w-6 absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity"
        >
          <MoreHorizontal className="h-3 w-3" />
        </Button>
      </div>
      <div className="p-2">
        <div className="text-xs font-medium truncate">{asset.name}</div>
        <div className="text-[10px] text-muted-foreground">
          {asset.size} · {asset.updated}
        </div>
      </div>
    </div>
  );
}