'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Calendar, Edit2, DollarSign } from 'lucide-react'
import { format } from 'date-fns'

interface SelectedDatesCardProps {
  selectedDates: Date[]
  placementType: string
  placementDetails: {
    name: string
    price: number
    dimensions: string
  }
  totalCost: number
  onChangeDates?: () => void
  showChangeButton?: boolean
}

export function SelectedDatesCard({
  selectedDates,
  placementType,
  placementDetails,
  totalCost,
  onChangeDates,
  showChangeButton = true
}: SelectedDatesCardProps) {
  // Sort dates chronologically
  const sortedDates = [...selectedDates].sort((a, b) => a.getTime() - b.getTime())
  const startDate = sortedDates[0]
  const endDate = sortedDates[sortedDates.length - 1]
  const duration = sortedDates.length
  
  // Format date range
  const dateRangeText = sortedDates.length === 1
    ? format(startDate, 'MMM d, yyyy')
    : `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d, yyyy')}`
  
  // Get placement color
  const placementColors: Record<string, string> = {
    'top-banner': 'bg-purple-100 text-purple-700 border-purple-200',
    'right-side': 'bg-blue-100 text-blue-700 border-blue-200',
    'left-side': 'bg-green-100 text-green-700 border-green-200'
  }
  
  const colorClass = placementColors[placementType] || 'bg-gray-100 text-gray-700 border-gray-200'
  
  return (
    <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200 shadow-md">
      <CardHeader className="pb-4">
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg font-bold text-gray-900 flex items-center gap-2">
            <Calendar className="w-5 h-5 text-blue-600" />
            Selected Dates
          </CardTitle>
          {showChangeButton && onChangeDates && (
            <Button
              variant="ghost"
              size="sm"
              onClick={onChangeDates}
              className="text-blue-600 hover:text-blue-700 hover:bg-blue-100"
            >
              <Edit2 className="w-4 h-4 mr-1" />
              Change Dates
            </Button>
          )}
        </div>
      </CardHeader>
      
      <CardContent className="space-y-4">
        {/* Placement Type Badge */}
        <div className="flex items-center gap-2">
          <span className="text-sm text-gray-600 font-medium">Placement:</span>
          <Badge className={`${colorClass} font-semibold`}>
            {placementDetails.name}
          </Badge>
          <span className="text-xs text-gray-500">({placementDetails.dimensions})</span>
        </div>
        
        {/* Date Range */}
        <div className="bg-white/60 rounded-lg p-4 border border-blue-200">
          <div className="flex items-center justify-between mb-2">
            <div>
              <p className="text-xs text-gray-600 font-medium mb-1">Date Range</p>
              <p className="text-lg font-bold text-gray-900">{dateRangeText}</p>
            </div>
            <Badge variant="secondary" className="bg-blue-600 text-white text-sm">
              {duration} {duration === 1 ? 'day' : 'days'}
            </Badge>
          </div>
          
          {/* Individual Dates List (if more than 2 dates) */}
          {sortedDates.length > 2 && (
            <div className="mt-3 pt-3 border-t border-blue-200">
              <p className="text-xs text-gray-600 font-medium mb-2">Selected Dates:</p>
              <div className="flex flex-wrap gap-1.5 max-h-20 overflow-y-auto">
                {sortedDates.map((date, idx) => (
                  <Badge key={idx} variant="outline" className="text-xs bg-white border-blue-300 text-blue-700">
                    {format(date, 'MMM d')}
                  </Badge>
                ))}
              </div>
            </div>
          )}
        </div>
        
        {/* Cost Breakdown */}
        <div className="bg-white rounded-lg p-4 border border-blue-200">
          <div className="space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="text-gray-600">Daily Rate:</span>
              <span className="font-semibold text-gray-900">${placementDetails.price}/day</span>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="text-gray-600">Duration:</span>
              <span className="font-semibold text-gray-900">{duration} {duration === 1 ? 'day' : 'days'}</span>
            </div>
            <div className="flex items-center justify-between text-sm pt-2 border-t border-blue-200">
              <span className="text-gray-600 font-medium">Subtotal:</span>
              <span className="font-semibold text-gray-900">${duration * placementDetails.price}</span>
            </div>
          </div>
        </div>
        
        {/* Total Cost */}
        <div className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg p-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <DollarSign className="w-6 h-6" />
            <span className="text-lg font-bold">Total Cost:</span>
          </div>
          <span className="text-3xl font-bold">${totalCost}</span>
        </div>
        
        {/* Note */}
        <div className="bg-blue-100/50 rounded-lg p-3 border border-blue-200">
          <p className="text-xs text-gray-700">
            <strong>Note:</strong> Payment will be processed after admin approval. You'll be notified within 24 hours.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}