"use client";

import { FileCode2, Globe, Trash2, ExternalLink } from "lucide-react";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import type { PageInfo } from "@/lib/api/pages";

type PageCardProps = {
  page: PageInfo;
  categoryName?: string;
  onOpen: (id: string) => void;
  onDelete: (id: string) => void;
};

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  return `${(bytes / 1024).toFixed(1)} KB`;
}

function extractDomain(url: string): string {
  try {
    return new URL(url).hostname;
  } catch {
    return url;
  }
}

export function PageCard({ page, categoryName, onOpen, onDelete }: PageCardProps) {
  const isUrl = page.content_type === "url";
  const Icon = isUrl ? Globe : FileCode2;

  return (
    <Card
      className="relative group overflow-hidden border border-foreground/5 bg-foreground/5 backdrop-blur-xl transition-all duration-500 hover:border-primary/30 hover:bg-foreground/10 hover:shadow-[0_20px_50px_rgba(0,0,0,0.3)] rounded-[2rem] cursor-pointer"
      onClick={() => onOpen(page.id)}
    >
      <div className="absolute -top-24 -right-24 w-48 h-48 bg-primary/10 blur-[60px] rounded-full group-hover:bg-primary/20 transition-colors duration-700" />

      <CardHeader className="relative pb-2">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            {isUrl ? (
              <div className="px-4 py-1.5 text-[9px] font-black uppercase tracking-[0.2em] rounded-full border bg-violet-500/10 border-violet-500/20 text-violet-400 transition-colors">
                <span className="flex items-center gap-2">
                  <div className="w-1.5 h-1.5 rounded-full bg-violet-500 shadow-[0_0_8px_theme(colors.violet.500)]" />
                  URL
                </span>
              </div>
            ) : (
              <div className="px-4 py-1.5 text-[9px] font-black uppercase tracking-[0.2em] rounded-full border bg-sky-500/10 border-sky-500/20 text-sky-400 transition-colors">
                <span className="flex items-center gap-2">
                  <div className="w-1.5 h-1.5 rounded-full bg-sky-500 shadow-[0_0_8px_theme(colors.sky.500)]" />
                  HTML
                </span>
              </div>
            )}
            {categoryName && (
              <div className="px-3 py-1.5 text-[9px] font-bold uppercase tracking-wider rounded-full border bg-foreground/5 border-foreground/10 text-foreground/50">
                {categoryName}
              </div>
            )}
          </div>

          <Button
            variant="ghost"
            size="icon"
            className="h-9 w-9 rounded-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
            onClick={(e) => {
              e.stopPropagation();
              onDelete(page.id);
            }}
          >
            <Trash2 className="w-4 h-4" />
          </Button>
        </div>

        <CardTitle className="text-xl font-black tracking-tight flex items-center gap-4">
          <div className="p-3 bg-foreground/5 rounded-2xl border border-foreground/10 group-hover:border-primary/30 transition-colors">
            <Icon className="w-5 h-5 text-primary" />
          </div>
          <span className="group-hover:text-primary transition-colors truncate">{page.name}</span>
        </CardTitle>
        {page.description && (
          <CardDescription className="text-xs font-medium text-muted-foreground leading-relaxed mt-2 px-1 line-clamp-2">
            {page.description}
          </CardDescription>
        )}
      </CardHeader>

      <CardContent className="pt-4 relative">
        <div className="grid grid-cols-2 gap-3">
          {isUrl && page.url ? (
            <>
              <div className="col-span-2 p-4 rounded-2xl border border-foreground/5 bg-foreground/5 flex flex-col gap-1">
                <span className="text-[8px] uppercase font-bold text-muted-foreground/40 tracking-widest">Domain</span>
                <span className="text-xs font-mono text-foreground/70 truncate">{extractDomain(page.url)}</span>
              </div>
            </>
          ) : (
            <>
              <div className="p-4 rounded-2xl border border-foreground/5 bg-foreground/5 flex flex-col gap-1">
                <span className="text-[8px] uppercase font-bold text-muted-foreground/40 tracking-widest">File</span>
                <span className="text-xs font-mono text-foreground/70 truncate">{page.filename}</span>
              </div>
              <div className="p-4 rounded-2xl border border-foreground/5 bg-foreground/5 flex flex-col gap-1">
                <span className="text-[8px] uppercase font-bold text-muted-foreground/40 tracking-widest">Size</span>
                <span className="text-lg font-black text-primary">{formatSize(page.size_bytes)}</span>
              </div>
            </>
          )}
        </div>
      </CardContent>

      <CardFooter className="pt-2 pb-8 px-6">
        <Button
          variant="outline"
          className="w-full h-12 rounded-2xl border-foreground/10 font-bold uppercase tracking-widest hover:bg-foreground/10 transition-all"
          onClick={(e) => {
            e.stopPropagation();
            onOpen(page.id);
          }}
        >
          <ExternalLink className="w-4 h-4 mr-2" />
          Open Page
        </Button>
      </CardFooter>
    </Card>
  );
}
