apps/web/src/components/packages/PackageCard.tsx

import { Link, useNavigate } from "@tanstack/react-router";
import { Button } from "@pram/ui/components/button";
import { Card, CardContent } from "@pram/ui/components/card";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { toast } from "sonner";

export interface PackageItem {
  id: string;
  title: string;
  description?: string | null;
  examTypeName?: string | null;
  isPublic: boolean;
  creatorUserId?: string | null;
  totalQuestions: number;
  totalSections: number;
  estimatedDurationMin?: number | null;
  usageCount: number;
  avgRating?: number | null;
}

interface PackageCardProps {
  pkg: PackageItem;
  isOwner: boolean;
  bulkMode: boolean;
  isSelected: boolean;
  isTogglePending?: boolean;
  onToggleSelect: () => void;
  onTogglePublic: () => void;
}

export function PackageCard({
  pkg,
  isOwner,
  bulkMode,
  isSelected,
  isTogglePending = false,
  onToggleSelect,
  onTogglePublic,
}: PackageCardProps) {
  const navigate = useNavigate();
  const isPrivate = isOwner && !pkg.isPublic;

  return (
    <Card
      className={`clay-shadow clay-hover bg-[var(--pure-white)] border-2 rounded-[var(--radius-xl)] h-full flex flex-col ${
        bulkMode && isSelected
          ? "border-[var(--matcha-600)] ring-2 ring-[var(--matcha-400)]"
          : isPrivate && !bulkMode
            ? "border-[var(--oat-border)] border-l-[var(--warm-charcoal)] border-l-4"
            : "border-[var(--oat-border)]"
      }`}
    >
      <CardContent className="p-5 flex flex-col h-full">
        {/* Clickable content area */}
        <div
          className="block flex-1 cursor-pointer"
          onClick={bulkMode ? onToggleSelect : undefined}
        >
          <Link
            to="/package/$id"
            params={{ id: pkg.id }}
            className={bulkMode ? "pointer-events-none" : ""}
          >
            <div className="flex items-start justify-between mb-3">
              <div className="flex gap-2 flex-wrap">
                {bulkMode && (
                  <span className={`px-2 py-1 rounded-full text-[10px] font-semibold flex items-center gap-1 ${
                    isSelected
                      ? "bg-[var(--matcha-600)] text-[var(--pure-white)]"
                      : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
                  }`}>
                    <MaterialIcon name={isSelected ? "check_circle" : "radio_button_unchecked"} className="text-xs" />
                    {isSelected ? "Terpilih" : "Pilih"}
                  </span>
                )}
                {pkg.examTypeName && (
                  <span className="inline-flex items-center px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold leading-none whitespace-nowrap">
                    {pkg.examTypeName}
                  </span>
                )}
              </div>
              {pkg.avgRating && (
                <div className="flex items-center gap-1 text-[var(--lemon-700)] shrink-0">
                  <MaterialIcon name="star" className="text-sm" />
                  <span className="text-xs font-bold">{pkg.avgRating}</span>
                </div>
              )}
            </div>

            <h3 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-2 line-clamp-2">
              {pkg.title}
            </h3>

            {pkg.description && (
              <p className="text-sm text-[var(--warm-charcoal)] line-clamp-2 mb-4">
                {pkg.description}
              </p>
            )}
          </Link>

          <div className="flex items-center justify-between mt-auto pt-3 border-t border-[var(--oat-border)]">
            <div className="flex gap-3 text-xs text-[var(--warm-charcoal)]">
              <span className="flex items-center gap-1">
                <MaterialIcon name="quiz" className="text-xs" />
                {pkg.totalQuestions}
              </span>
              <span className="flex items-center gap-1">
                <MaterialIcon name="folder" className="text-xs" />
                {pkg.totalSections}
              </span>
              {pkg.estimatedDurationMin && (
                <span className="flex items-center gap-1">
                  <MaterialIcon name="timer" className="text-xs" />
                  {pkg.estimatedDurationMin}m
                </span>
              )}
            </div>
            <span className="text-xs text-[var(--warm-silver)]">
              {pkg.usageCount}x digunakan
            </span>
          </div>
        </div>

        {/* Owner actions */}
        {isOwner && !bulkMode && (
          <div className="mt-3 pt-3 border-t border-[var(--oat-border)] flex items-center justify-between">
            <button
              onClick={onTogglePublic}
              disabled={isTogglePending}
              aria-label={pkg.isPublic ? "Jadikan privat" : "Jadikan publik"}
              className={`group text-xs font-semibold px-3 py-1.5 rounded-full transition-all cursor-pointer flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed ${
                pkg.isPublic
                  ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] hover:bg-[var(--pomegranate-400)]/15 hover:text-[var(--pomegranate-600)]"
                  : "bg-[var(--slushie-500)]/15 text-[var(--slushie-800)] hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)]"
              }`}
            >
              {/* Default icon */}
              <MaterialIcon
                name={pkg.isPublic ? "public" : "lock"}
                className="text-xs group-hover:hidden"
              />
              {/* Hover icon (shows intent) */}
              <MaterialIcon
                name={pkg.isPublic ? "lock" : "public"}
                className="text-xs hidden group-hover:inline"
              />
              {/* Default label */}
              <span className="group-hover:hidden">
                {pkg.isPublic ? "Publik" : "Privat"}
              </span>
              {/* Hover label */}
              <span className="hidden group-hover:inline">
                {pkg.isPublic ? "Jadikan Privat" : "Jadikan Publik"}
              </span>
            </button>

            {pkg.isPublic && (
              <button
                onClick={() => {
                  const url = `${window.location.origin}/package/${pkg.id}`;
                  navigator.clipboard.writeText(url);
                  toast.success("Link paket disalin!");
                }}
                className="text-xs text-[var(--matcha-600)] hover:bg-[var(--matcha-300)]/20 px-3 py-1.5 rounded-full transition-colors flex items-center gap-1 cursor-pointer"
              >
                <MaterialIcon name="share" className="text-xs" />
                Bagikan
              </button>
            )}
          </div>
        )}

        {/* CTA */}
        {!bulkMode && (
          <div className="mt-3 pt-3 border-t border-[var(--oat-border)]">
            <Button
              className="w-full bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]"
              onClick={() => navigate({ to: "/package/$id/take", params: { id: pkg.id } })}
              size="xl"
            >
              <MaterialIcon name="play_arrow" className="mr-2" />
              Mulai Latihan
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  );
}