import { Calendar, Clock, MapPin } from 'lucide-react';
import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';

interface PreviewStepProps {
  data: {
    dayNumber?: number;
    date?: string;
    timeBlock?: string;
    place?: any;
    notes?: string;
  };
  onNotesChange: (notes: string) => void;
}

const TIME_BLOCK_LABELS: Record<string, string> = {
  morning: 'Sabah',
  afternoon: 'Öğle',
  evening: 'Akşam',
  night: 'Gece',
};

export const PreviewStep: React.FC<PreviewStepProps> = ({ data, onNotesChange }) => {
  const { dayNumber, date, timeBlock, place, notes } = data;

  return (
    <div className="space-y-6">
      <h3 className="text-lg font-medium text-center">Plan Özeti</h3>
      
      <div className="space-y-4">
        <Card className="border-primary/20 bg-primary/5">
          <CardContent className="p-4 space-y-3">
            <div className="flex items-start space-x-3">
              <div className="p-2 bg-background rounded-full border">
                <MapPin className="w-4 h-4 text-primary" />
              </div>
              <div>
                <p className="text-xs text-muted-foreground uppercase tracking-wider font-semibold">Yer</p>
                <p className="font-medium">{place?.name}</p>
                <p className="text-xs text-muted-foreground">{place?.address}</p>
              </div>
            </div>

            <div className="flex items-center space-x-6 pt-2 border-t border-primary/10">
              <div className="flex items-center space-x-2">
                <Calendar className="w-4 h-4 text-muted-foreground" />
                <div>
                  <p className="text-[10px] text-muted-foreground uppercase font-semibold">Gün</p>
                  <p className="text-sm font-medium">Gün {dayNumber}</p>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <Clock className="w-4 h-4 text-muted-foreground" />
                <div>
                  <p className="text-[10px] text-muted-foreground uppercase font-semibold">Vakit</p>
                  <p className="text-sm font-medium">{timeBlock ? TIME_BLOCK_LABELS[timeBlock] : '-'}</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <div className="space-y-2">
          <Label htmlFor="notes">Notlar (Opsiyonel)</Label>
          <Textarea
            id="notes"
            placeholder="Bu ziyaret için özel notlarınız..."
            value={notes}
            onChange={(e) => onNotesChange(e.target.value)}
            className="min-h-[100px]"
          />
        </div>
      </div>
    </div>
  );
};
