import { Calendar } from 'lucide-react';
import React from 'react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

interface SavePlanDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  leadEmail: string;
  setLeadEmail: (email: string) => void;
  leadWhatsApp: string;
  setLeadWhatsApp: (phone: string) => void;
  leadCountryCode: string;
  setLeadCountryCode: (code: string) => void;
  leadCountry: string;
  setLeadCountry: (country: string) => void;
  leadConsent: boolean;
  setLeadConsent: (consent: boolean) => void;
  isCreatingLead: boolean;
  onSubmit: () => void;
}

export const SavePlanDialog: React.FC<SavePlanDialogProps> = ({
  open,
  onOpenChange,
  leadEmail,
  setLeadEmail,
  leadWhatsApp,
  setLeadWhatsApp,
  leadCountryCode,
  setLeadCountryCode,
  leadCountry,
  setLeadCountry,
  leadConsent,
  setLeadConsent,
  isCreatingLead,
  onSubmit,
}) => {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogTrigger asChild>
        <Button variant="secondary" size="sm" className="bg-primary text-white hover:bg-primary/90 border-none rounded-full px-2 sm:px-4 text-xs sm:text-sm whitespace-nowrap">
          <span className="hidden sm:inline">Kaydetmek için giriş yap</span>
          <span className="sm:hidden">💾 Kaydet</span>
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[500px] rounded-3xl max-w-[95vw]">
        <DialogHeader className="items-center text-center">
          <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
            <Calendar className="h-8 w-8 text-primary" />
          </div>
          <DialogTitle className="text-2xl">Planını kaydet ve yerel firmalardan teklif al</DialogTitle>
          <DialogDescription>
            Bu seyahat planına uygun yerel firmalar sana özel fiyat teklifleri gönderebilir.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <label className="text-sm font-medium">E-posta Adresi *</label>
            <Input 
              type="email" 
              placeholder="ornek@mail.com" 
              className="h-12"
              value={leadEmail}
              onChange={(e) => setLeadEmail(e.target.value)}
              required
            />
          </div>
          <div className="space-y-2">
            <label className="text-sm font-medium">WhatsApp Numarası *</label>
            <div className="flex gap-2">
              <div className="w-24 shrink-0">
                <Select value={leadCountryCode} onValueChange={setLeadCountryCode}>
                  <SelectTrigger className="h-12">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="+90">TR +90</SelectItem>
                    <SelectItem value="+1">US +1</SelectItem>
                    <SelectItem value="+44">UK +44</SelectItem>
                    <SelectItem value="+49">DE +49</SelectItem>
                    <SelectItem value="+33">FR +33</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <Input 
                type="tel" 
                placeholder="5xx xxx xxxx" 
                className="h-12 flex-1"
                value={leadWhatsApp}
                onChange={(e) => setLeadWhatsApp(e.target.value)}
                required
              />
            </div>
          </div>
          <div className="space-y-2">
            <label className="text-sm font-medium">Ülke *</label>
            <Select value={leadCountry} onValueChange={setLeadCountry}>
              <SelectTrigger className="h-12">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="tr">Türkiye</SelectItem>
                <SelectItem value="us">ABD</SelectItem>
                <SelectItem value="uk">İngiltere</SelectItem>
                <SelectItem value="de">Almanya</SelectItem>
                <SelectItem value="fr">Fransa</SelectItem>
              </SelectContent>
            </Select>
          </div>
          
          <div className="flex items-start space-x-3 p-4 bg-muted/50 rounded-lg border">
            <Checkbox 
              id="lead-consent" 
              checked={leadConsent}
              onCheckedChange={(checked) => setLeadConsent(checked as boolean)}
            />
            <div className="space-y-1 leading-none">
              <label htmlFor="lead-consent" className="text-sm font-medium leading-relaxed cursor-pointer">
                Yerel firmalar bu seyahat hakkında benimle iletişime geçebilir
              </label>
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button 
            className="w-full h-12 rounded-full text-lg font-bold" 
            onClick={onSubmit}
            disabled={!leadConsent || isCreatingLead || !leadEmail || !leadWhatsApp}
          >
            {isCreatingLead ? 'Gönderiliyor...' : 'Planı Gönder'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
