'use client';

import { format, parseISO } from 'date-fns';
import { tr } from 'date-fns/locale';
import { Calendar, Clock, AlertCircle, CheckCircle2, XCircle } from 'lucide-react';

interface LeaveRequestCardProps {
  id: string;
  startDate: string;
  endDate: string;
  reason?: string;
  status: 'PENDING' | 'APPROVED' | 'REJECTED';
  rejectionReason?: string;
  approvedAt?: string;
}

export default function LeaveRequestCard({
  startDate, endDate, reason, status, rejectionReason, approvedAt,
}: LeaveRequestCardProps) {
  const start = parseISO(startDate);
  const end = parseISO(endDate);
  const dayCount = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)) + 1;

  const statusConfig = {
    PENDING: {
      bg: 'bg-amber-50 dark:bg-amber-950/40',
      border: 'border-amber-200 dark:border-amber-800',
      badge: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-400',
      icon: Clock,
      label: 'Beklemede',
    },
    APPROVED: {
      bg: 'bg-emerald-50 dark:bg-emerald-950/40',
      border: 'border-emerald-200 dark:border-emerald-800',
      badge: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-400',
      icon: CheckCircle2,
      label: 'Onaylandı',
    },
    REJECTED: {
      bg: 'bg-red-50 dark:bg-red-950/40',
      border: 'border-red-200 dark:border-red-800',
      badge: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-400',
      icon: XCircle,
      label: 'Reddedildi',
    },
  };

  const config = statusConfig[status];
  const StatusIcon = config.icon;

  return (
    <div className={`overflow-hidden rounded-xl border ${config.border} ${config.bg} transition`}>
      <div className="p-4 sm:p-5">
        {/* Başlık Satırı */}
        <div className="flex items-start justify-between gap-3">
          <div className="flex-1">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white dark:bg-zinc-800">
                <Calendar className="h-5 w-5 text-zinc-400" />
              </div>
              <div>
                <p className="text-sm font-semibold text-zinc-900 dark:text-white">
                  {format(start, 'd MMMM yyyy', { locale: tr })}
                  {startDate !== endDate && ` — ${format(end, 'd MMMM yyyy', { locale: tr })}`}
                </p>
                <p className="text-xs text-zinc-500 dark:text-zinc-400">
                  {dayCount} gün
                </p>
              </div>
            </div>
          </div>

          <div className={`flex items-center gap-1.5 rounded-full px-2.5 py-1 ${config.badge}`}>
            <StatusIcon className="h-3.5 w-3.5" />
            <span className="text-xs font-semibold">{config.label}</span>
          </div>
        </div>

        {/* İzin Sebebi */}
        {reason && (
          <div className="mt-3 border-t border-white/50 pt-3 dark:border-zinc-700">
            <p className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Sebep:</p>
            <p className="mt-1 text-sm text-zinc-700 dark:text-zinc-300">{reason}</p>
          </div>
        )}

        {/* Red Sebebi */}
        {status === 'REJECTED' && rejectionReason && (
          <div className="mt-3 flex gap-3 border-t border-white/50 pt-3 dark:border-zinc-700">
            <AlertCircle className="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400" />
            <div>
              <p className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Red Sebebi:</p>
              <p className="mt-1 text-sm text-zinc-700 dark:text-zinc-300">{rejectionReason}</p>
            </div>
          </div>
        )}

        {/* Onay Tarihi */}
        {approvedAt && (
          <div className="mt-3 border-t border-white/50 pt-3 text-xs text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
            Onay Tarihi: {format(parseISO(approvedAt), 'd MMMM yyyy, HH:mm', { locale: tr })}
          </div>
        )}
      </div>
    </div>
  );
}