'use client';

import React from 'react';
import { Badge } from '@alga-psa/ui/components/Badge';
import { Calendar, Clock, User, Loader2 } from 'lucide-react';
import { useTranslation } from '@alga-psa/ui/lib/i18n/client';
import { format } from 'date-fns';
import { fromZonedTime } from 'date-fns-tz';
import type { BadgeVariant } from '@alga-psa/ui/components/Badge';

export interface ITicketAppointmentRequest {
  appointment_request_id: string;
  service_name?: string;
  status: 'pending' | 'approved' | 'declined' | 'cancelled';
  requested_date: string;
  requested_time: string;
  requested_duration: number;
  requester_timezone?: string | null;
  preferred_assigned_user_name?: string;
  approved_at?: string;
  approver_first_name?: string;
  approver_last_name?: string;
  declined_reason?: string;
  is_authenticated: boolean;
}

interface TicketAppointmentRequestsProps {
  ticketId: string;
  appointments?: ITicketAppointmentRequest[];
  isLoading?: boolean;
}

export default function TicketAppointmentRequests({
  ticketId,
  appointments = [],
  isLoading = false
}: TicketAppointmentRequestsProps) {
  const { t } = useTranslation('features/appointments');
  const { t: tCore } = useTranslation('common');

  const getStatusBadgeVariant = (status: string): BadgeVariant => {
    switch (status) {
      case 'approved':
        return 'success';
      case 'pending':
        return 'warning';
      case 'declined':
      case 'cancelled':
        return 'error';
      default:
        return 'outline';
    }
  };

  const formatDateTime = (dateVal: unknown, timeVal: unknown, tz?: string | null): string => {
    try {
      // Normalize PG DATE (may be JS Date object) to YYYY-MM-DD string
      const dateStr = dateVal instanceof Date
        ? dateVal.toISOString().split('T')[0]
        : typeof dateVal === 'string' ? dateVal.slice(0, 10) : null;
      // Normalize PG TIME to HH:MM string
      const timeStr = typeof timeVal === 'string' ? timeVal.slice(0, 5) : null;
      if (!dateStr || !timeStr) return t('ticketSection.invalidDateTime');

      const dt = fromZonedTime(`${dateStr}T${timeStr}:00`, tz || 'UTC');
      if (isNaN(dt.getTime())) return t('ticketSection.invalidDateTime');
      return dt.toLocaleString('en-US', {
        month: 'short', day: 'numeric', year: 'numeric',
        hour: '2-digit', minute: '2-digit'
      });
    } catch {
      return t('ticketSection.invalidDateTime');
    }
  };

  // Don't render anything if loading
  if (isLoading) {
    return (
      <div className="mt-4 flex items-center justify-center py-4 text-muted-foreground">
        <Loader2 className="h-4 w-4 animate-spin mr-2" />
        {tCore('common.loading')}
      </div>
    );
  }

  // Don't show section if no appointments
  if (appointments.length === 0) {
    return null;
  }

  return (
    <div className="mt-4">
      <h3 className="text-sm font-medium mb-3">{t('ticketSection.title')}</h3>
      <div className="space-y-3">
        {appointments.map((appointment) => (
          <div
            key={appointment.appointment_request_id}
            className="border rounded-lg p-3 bg-card"
          >
            <div className="flex items-start justify-between gap-2">
              <div className="flex-1 min-w-0">
                {/* Service name */}
                <div className="flex items-center gap-2 mb-2">
                  <span className="font-medium text-sm truncate">
                    {appointment.service_name || t('ticketSection.service')}
                  </span>
                  <Badge variant={getStatusBadgeVariant(appointment.status)}>
                    {t(`status.${appointment.status}`)}
                  </Badge>
                </div>

                {/* Date/Time */}
                <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
                  <Calendar className="h-3 w-3" />
                  <span>
                    {formatDateTime(appointment.requested_date, appointment.requested_time, appointment.requester_timezone)}
                  </span>
                </div>

                {/* Duration */}
                <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
                  <Clock className="h-3 w-3" />
                  <span>
                    {appointment.requested_duration} {t('ticketSection.minutes')}
                  </span>
                </div>

                {/* Preferred technician if set */}
                {appointment.preferred_assigned_user_name && (
                  <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
                    <User className="h-3 w-3" />
                    <span>
                      {t('ticketSection.preferred')} {appointment.preferred_assigned_user_name}
                    </span>
                  </div>
                )}

                {/* Approval info for approved */}
                {appointment.status === 'approved' && appointment.approved_at && (
                  <div className="text-xs text-muted-foreground mt-1">
                    {appointment.approver_first_name && (() => {
                      try {
                        const approvedDate = new Date(appointment.approved_at!);
                        if (isNaN(approvedDate.getTime())) return null;
                        return (
                          <span>
                            {t('ticketSection.approvedBy')} {appointment.approver_first_name} {appointment.approver_last_name} {t('ticketSection.on')}{' '}
                            {format(approvedDate, 'MMM d, yyyy')}
                          </span>
                        );
                      } catch {
                        return null;
                      }
                    })()}
                  </div>
                )}

                {/* Declined reason */}
                {appointment.status === 'declined' && appointment.declined_reason && (
                  <div className="text-xs text-destructive mt-1">
                    {t('ticketSection.declined')} {appointment.declined_reason}
                  </div>
                )}

                {/* Public request indicator */}
                {!appointment.is_authenticated && (
                  <div className="text-xs text-muted-foreground mt-1 italic">
                    {t('ticketSection.publicRequest')}
                  </div>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
