"use client";

import { Check, ChevronRight, Users, Eye, Edit2, Trash2 } from "lucide-react";
import type { Lang } from "@/lib/config";
import type { PublicWaitlist, MyWaitlist, WaitlistTranslations } from "./types";
import { getCategoryInfo } from "./types";

// Props for public waitlist card (browse mode)
interface PublicWaitlistCardProps {
  waitlist: PublicWaitlist;
  lang: Lang;
  t: WaitlistTranslations;
  onJoinClick: (waitlistId: string) => void;
}

// Props for owner's waitlist card (my-waitlists mode)
interface MyWaitlistCardProps {
  waitlist: MyWaitlist;
  lang: Lang;
  t: WaitlistTranslations;
  onViewSignups: (waitlist: MyWaitlist) => void;
  onEdit: (waitlist: MyWaitlist) => void;
  onDelete: (waitlistId: string) => void;
}

export function PublicWaitlistCard({
  waitlist,
  lang,
  t,
  onJoinClick,
}: PublicWaitlistCardProps) {
  const isAr = lang === "ar";
  const cat = getCategoryInfo(waitlist.category || "general");

  return (
    <div className="group bg-white rounded-2xl border border-slate-200/80 p-5 hover:shadow-lg hover:border-brand-green/30 transition-all duration-300">
      <div className="flex items-start justify-between mb-3">
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-1">
            <span
              className={`px-2 py-0.5 text-xs font-medium rounded-full ${cat.color}`}
            >
              {isAr ? cat.labelAr : cat.label}
            </span>
          </div>
          <h3 className="font-semibold text-slate-900 group-hover:text-brand-green transition-colors">
            {isAr && waitlist.titleAr ? waitlist.titleAr : waitlist.title}
          </h3>
        </div>
        {waitlist.isSignedUp && (
          <span className="flex items-center gap-1 px-2 py-1 bg-emerald-100 text-emerald-700 text-xs font-semibold rounded-full">
            <Check className="w-3 h-3" />
            {t.alreadyJoined}
          </span>
        )}
      </div>

      {(waitlist.description || waitlist.descriptionAr) && (
        <p className="text-sm text-slate-500 mb-4 line-clamp-2">
          {isAr && waitlist.descriptionAr
            ? waitlist.descriptionAr
            : waitlist.description}
        </p>
      )}

      <div className="flex items-center justify-between mt-auto pt-3 border-t border-slate-100">
        <span className="flex items-center gap-1.5 text-xs text-slate-400">
          <Users className="w-4 h-4" />
          {waitlist.signupCount} {t.signups}
        </span>

        {waitlist.isSignedUp ? (
          <span className="text-sm text-emerald-600 font-medium">
            {isAr ? "شكرًا لتسجيلك" : "You're in!"}
          </span>
        ) : (
          <button
            onClick={() => onJoinClick(waitlist.id)}
            className="flex items-center gap-1 px-3 py-1.5 bg-brand-green text-white text-sm font-semibold rounded-lg hover:bg-brand-greenHover transition-colors"
          >
            {t.joinWaitlist}
            <ChevronRight className="w-4 h-4" />
          </button>
        )}
      </div>
    </div>
  );
}

export function MyWaitlistCard({
  waitlist,
  lang,
  t,
  onViewSignups,
  onEdit,
  onDelete,
}: MyWaitlistCardProps) {
  const isAr = lang === "ar";
  const cat = getCategoryInfo(waitlist.category);

  return (
    <div className="group bg-white rounded-2xl border border-slate-200/80 p-5 hover:shadow-lg transition-all duration-300">
      <div className="flex items-start justify-between mb-3">
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-1">
            <span
              className={`px-2 py-0.5 text-xs font-medium rounded-full ${cat.color}`}
            >
              {isAr ? cat.labelAr : cat.label}
            </span>
            <span
              className={`px-2 py-0.5 text-xs font-medium rounded-full ${
                waitlist.isActive
                  ? "bg-emerald-100 text-emerald-700"
                  : "bg-slate-100 text-slate-600"
              }`}
            >
              {waitlist.isActive ? t.active : t.inactive}
            </span>
            {waitlist.isPublic && (
              <span className="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-700">
                {t.public}
              </span>
            )}
          </div>
          <h3 className="font-semibold text-slate-900">
            {isAr && waitlist.titleAr ? waitlist.titleAr : waitlist.title}
          </h3>
        </div>
      </div>

      {(waitlist.description || waitlist.descriptionAr) && (
        <p className="text-sm text-slate-500 mb-4 line-clamp-2">
          {isAr && waitlist.descriptionAr
            ? waitlist.descriptionAr
            : waitlist.description}
        </p>
      )}

      <div className="flex items-center justify-between mt-auto pt-3 border-t border-slate-100">
        <span className="flex items-center gap-1.5 text-xs text-slate-400">
          <Users className="w-4 h-4" />
          {waitlist.signupCount} {t.signups}
        </span>

        <div className="flex items-center gap-1">
          <button
            onClick={() => onViewSignups(waitlist)}
            className="p-1.5 text-slate-500 hover:bg-slate-100 rounded-lg transition-colors"
            title={t.viewSignups}
          >
            <Eye className="w-4 h-4" />
          </button>
          <button
            onClick={() => onEdit(waitlist)}
            className="p-1.5 text-slate-500 hover:bg-slate-100 rounded-lg transition-colors"
            title={t.edit}
          >
            <Edit2 className="w-4 h-4" />
          </button>
          <button
            onClick={() => onDelete(waitlist.id)}
            className="p-1.5 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
            title={t.delete}
          >
            <Trash2 className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
}