import Link from "next/link";
import { ArrowRight, Clapperboard, Heart } from "lucide-react";
import { PLATFORM_CONFIGS } from "@/types/platform";
import type { Platform }    from "@/types/platform";
import { STORYBOARD_STYLES } from "@/types/storyboard";
import { formatDate } from "@/lib/utils";

// ── Types (local, tidak perlu export) ─────────────────────────────────────────
interface StoryboardRow {
  id:              string;
  source_title:    string | null;
  source_platform: string;
  style:           string;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  output:          any;
  created_at:      string;
}

interface PromptHistoryRow {
  id:          string;
  platform:    string;
  title:       string | null;
  output_text: string | null;
  is_favorite: boolean;
  created_at:  string;
}

// ── Recent Storyboards ────────────────────────────────────────────────────────
export function RecentStoryboards({ items }: { items: StoryboardRow[] }) {
  if (items.length === 0) return null;

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <Clapperboard className="w-4 h-4 text-violet-400" />
          <h2 className="font-bold text-lg">Storyboard Terbaru</h2>
          <div className="w-16 gold-hr-soft" />
        </div>
        <Link
          href="/history?tab=storyboard"
          className="text-sm hover:underline flex items-center gap-1"
          style={{ color: "#d4af37" }}
        >
          Lihat semua <ArrowRight className="w-3.5 h-3.5" />
        </Link>
      </div>

      <div className="space-y-2">
        {items.map((item) => {
          const styleInfo = STORYBOARD_STYLES[item.style as keyof typeof STORYBOARD_STYLES];
          const meta      = item.output?.metadata;
          return (
            <Link
              key={item.id}
              href="/history?tab=storyboard"
              className="flex items-center gap-4 p-3.5 rounded-2xl transition-all hover:opacity-80"
              style={{ background: "rgba(124,58,237,0.05)", border: "1px solid rgba(124,58,237,0.15)" }}
            >
              <div
                className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 text-xl"
                style={{ background: "rgba(124,58,237,0.15)" }}
              >
                {styleInfo?.icon ?? "🎬"}
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium truncate">{item.source_title ?? "Storyboard"}</p>
                <p className="text-xs text-muted-foreground mt-0.5">
                  {styleInfo?.label ?? item.style}
                  {meta?.totalScenes      ? ` · ${meta.totalScenes} scene`       : ""}
                  {meta?.estimatedDuration ? ` · ${meta.estimatedDuration}`      : ""}
                  {" · "}{formatDate(item.created_at)}
                </p>
              </div>
              <span
                className="text-xs px-2 py-0.5 rounded-full flex-shrink-0"
                style={{ background: "rgba(124,58,237,0.2)", color: "#a78bfa" }}
              >
                {item.source_platform}
              </span>
            </Link>
          );
        })}
      </div>
    </div>
  );
}

// ── Recent Prompt History ─────────────────────────────────────────────────────
export function RecentPromptHistory({ items }: { items: PromptHistoryRow[] }) {
  if (items.length === 0) return null;

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <h2 className="font-bold text-lg">Riwayat Prompt Terbaru</h2>
          <div className="w-24 gold-hr-soft" />
        </div>
        <Link
          href="/history"
          className="text-sm hover:underline flex items-center gap-1"
          style={{ color: "#d4af37" }}
        >
          Lihat semua <ArrowRight className="w-3.5 h-3.5" />
        </Link>
      </div>

      <div className="space-y-2">
        {items.map((item) => {
          const platformConfig = PLATFORM_CONFIGS[item.platform as Platform];
          return (
            <div
              key={item.id}
              className="flex items-center gap-4 p-3.5 rounded-2xl bg-card"
              style={{ border: "1px solid rgba(212,175,55,0.1)" }}
            >
              <span className="text-2xl flex-shrink-0">{platformConfig?.icon ?? "🤖"}</span>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium truncate">
                  {item.title ?? (item.output_text ? item.output_text.substring(0, 60) + "…" : "Prompt tanpa judul")}
                </p>
                <p className="text-xs text-muted-foreground mt-0.5">
                  {platformConfig?.name} • {formatDate(item.created_at)}
                </p>
              </div>
              {item.is_favorite && <Heart className="w-4 h-4 text-pink-400 flex-shrink-0" />}
            </div>
          );
        })}
      </div>
    </div>
  );
}
