'use client';

import React from 'react';
import { Package, Users, Info, Terminal, ChevronRight } from 'lucide-react';

interface Split {
    id: string;
    slug: string;
    bottleName: string;
    bottleImage?: string;
    distillery?: string;
    totalVolume: number;
    hostShare: number;
    participantCount?: number;
    amountCl?: number; // for participating
    status?: string; // for participating
    isActive: boolean;
    hostName?: string;
}

interface SplitCardProps {
    split: Split;
    isParticipant?: boolean;
    onSelect?: () => void;
    showChevron?: boolean;
}

export default function SplitCard({ split, isParticipant, onSelect, showChevron = true }: SplitCardProps) {
    const statusLabels: Record<string, string> = {
        PENDING: 'Waiting',
        APPROVED: 'Confirmed',
        PAID: 'Paid',
        SHIPPED: 'Shipped',
        REJECTED: 'Rejected',
        WAITLIST: 'Waitlist'
    };

    return (
        <div
            className="p-5 rounded-[28px] border bg-zinc-900/30 border-white/5 hover:border-white/10 hover:bg-zinc-900/50 transition-all flex items-center justify-between group cursor-pointer"
            onClick={onSelect}
        >
            <div className="flex-1 min-w-0 pr-4">
                <div className="flex items-center gap-2 mb-1">
                    <h4 className="text-base font-black uppercase truncate tracking-tight text-zinc-200">
                        {split.bottleName}
                    </h4>
                    {!split.isActive && (
                        <span className="text-[7px] font-black uppercase px-1.5 py-0.5 rounded-full bg-zinc-800 border border-white/5 text-zinc-500">Closed</span>
                    )}
                </div>
                <div className="flex items-center gap-4 text-[9px] font-black uppercase tracking-[0.15em] text-zinc-600">
                    {isParticipant ? (
                        <>
                            <span className="flex items-center gap-1 text-orange-500/80">
                                <Package size={10} />
                                {split.amountCl}cl
                            </span>
                            <span className={`px-1.5 py-0.5 rounded bg-white/5 border border-white/5 ${split.status === 'SHIPPED' ? 'text-green-500' : 'text-zinc-400'}`}>
                                {statusLabels[split.status || ''] || split.status}
                            </span>
                        </>
                    ) : (
                        <>
                            <span className="flex items-center gap-1">
                                <Users size={10} className="text-zinc-700" />
                                {split.participantCount ?? 0} Confirmed
                            </span>
                            <span className="flex items-center gap-1">
                                <Info size={10} className="text-zinc-700" />
                                {split.totalVolume}cl Total
                            </span>
                        </>
                    )}
                </div>
                {split.hostName && (
                    <div className="mt-2 flex items-center gap-1 text-[8px] font-black uppercase text-zinc-700">
                        <Terminal size={8} /> By {split.hostName}
                    </div>
                )}
            </div>

            {showChevron && (
                <div className="w-10 h-10 rounded-2xl border bg-black/40 border-white/5 text-zinc-700 group-hover:text-zinc-400 group-hover:border-white/10 transition-all flex items-center justify-center">
                    <ChevronRight size={20} />
                </div>
            )}
        </div>
    );
}
