import React from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useTranslations } from "next-intl"

interface TimeSuggestion {
  stylistId: string
  stylistName?: string
  interval: {
    start: string
    end: string
  }
}

interface TimeSuggestionsProps {
  suggestions: TimeSuggestion[]
  onSelectTime: (date: Date, startTime: string, stylistId: string) => void
  onCancel: () => void
  stylists?: { value: string; label: string }[]
}

export function TimeSuggestions({ suggestions, onSelectTime, onCancel, stylists }: TimeSuggestionsProps) {
  const t = useTranslations()

  const formatTimeSlot = (start: string, end: string) => {
    // Parse the time strings - they already include timezone info (+05:30)
    const startDate = new Date(start)
    const endDate = new Date(end)

    // Format times in user's local timezone (not forcing UTC)
    const startTime = startDate.toLocaleTimeString('en-US', {
      hour: 'numeric',
      minute: '2-digit',
      hour12: true
    })
    const endTime = endDate.toLocaleTimeString('en-US', {
      hour: 'numeric',
      minute: '2-digit',
      hour12: true
    })

    // Format date in user's local timezone
    const date = startDate.toLocaleDateString('en-US', {
      month: 'short',
      day: '2-digit',
      year: 'numeric'
    })

    // For the form value, keep as HH:mm format in local timezone
    const startTimeValue = startDate.toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })

    return {
      dateObj: startDate,
      date,
      timeSlot: `${startTime} - ${endTime}`,
      startTimeValue
    }
  }

  return (
    <div className="space-y-4">
      <div className="text-center">
        <h3 className="text-lg font-semibold text-gray-900 mb-2">{t("calendar.timeSuggestions.title")}</h3>
        <p className="text-sm text-gray-600">{t("calendar.timeSuggestions.description")}</p>
      </div>

      <div className="space-y-3 max-h-60 overflow-y-auto">
        {suggestions.map((suggestion, index) => {
          const { dateObj, date, timeSlot, startTimeValue } = formatTimeSlot(
            suggestion.interval.start,
            suggestion.interval.end
          )
          const stylist = stylists?.find(s => s.value === suggestion.stylistId)
          const displayName = suggestion.stylistName || stylist?.label || suggestion.stylistId

          return (
            <Card key={index} className="cursor-pointer hover:bg-gray-50 transition-colors">
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium text-gray-900">{timeSlot}</p>
                    <p className="text-sm text-gray-600">{date}</p>
                    <p className="text-xs font-medium text-blue-600 mt-1">
                      Stylist: {displayName || "Unknown"}
                    </p>
                  </div>
                  <Button
                    onClick={() => onSelectTime(dateObj, startTimeValue, suggestion.stylistId)}
                    size="sm"
                    className="bg-primary-gradient text-white hover:opacity-90"
                  >
                    {t("calendar.timeSuggestions.select")}
                  </Button>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

      <div className="flex justify-center pt-4">
        <Button
          variant="outline"
          onClick={onCancel}
          className="border-gray-300 text-gray-700 hover:bg-gray-50"
        >
          {t("calendar.timeSuggestions.cancel")}
        </Button>
      </div>
    </div>
  )
}