import { useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { motion } from "framer-motion";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Checkbox } from "@/components/ui/checkbox";
import { Calendar as CalendarComponent } from "@/components/ui/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ArrowLeft, Calendar, Building, Users, Phone as PhoneIcon, CalendarIcon, Clock } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { cn } from "@/lib/utils";
import { supabase } from "@/integrations/supabase/client";

const industries = ["Angelpark", "Skischule", "Gastronomie"];

const interests = [
  "Anrufe entgegennehmen",
  "Häufige Fragen beantworten",
  "Anliegen erfassen (z.B. Rückruf- oder Reservationswünsche)",
  "Weitere Sprachen (FR/IT/EN)",
  "Anbindung an bestehende Systeme prüfen"
];

// Zeitslots von 9:00 bis 17:00 in 30-Minuten-Intervallen
const timeSlots = [
  "09:00", "09:30", "10:00", "10:30", "11:00", "11:30",
  "12:00", "12:30", "13:00", "13:30", "14:00", "14:30",
  "15:00", "15:30", "16:00", "16:30", "17:00"
];

export default function DemoBooking() {
  const navigate = useNavigate();
  const { toast } = useToast();
  const [searchParams] = useSearchParams();
  const presetIndustry = industries.find(
    (i) => i.toLowerCase() === (searchParams.get("branche") || "").toLowerCase()
  ) || "";
  const [formData, setFormData] = useState({
    companyName: "",
    contactName: "",
    email: "",
    phone: "",
    industry: presetIndustry,
    otherIndustry: "",
    selectedInterests: [] as string[],
    preferredDate: undefined as Date | undefined,
    preferredTime: "",
    additionalInfo: ""
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    // Validierung
    if (!formData.companyName || !formData.contactName || !formData.email || !formData.industry) {
      toast({
        title: "Fehler",
        description: "Bitte fülle alle Pflichtfelder aus.",
        variant: "destructive"
      });
      return;
    }


    try {
      const requestData = {
        companyName: formData.companyName,
        contactName: formData.contactName,
        email: formData.email,
        phone: formData.phone,
        industry: formData.industry,
        otherIndustry: undefined,
        selectedInterests: formData.selectedInterests,
        // Send structured date/time data for Google Calendar
        preferredDate: formData.preferredDate ? format(formData.preferredDate, "yyyy-MM-dd") : undefined,
        preferredTime: formData.preferredTime || undefined,
        // ISO 8601 format for Google Calendar (with timezone)
        preferredDateTimeISO: formData.preferredDate && formData.preferredTime
          ? `${format(formData.preferredDate, "yyyy-MM-dd")}T${formData.preferredTime}:00+01:00`
          : undefined,
        // Human-readable format for display/emails
        preferredDateTimeDisplay: formData.preferredDate && formData.preferredTime 
          ? `${format(formData.preferredDate, "PPP", { locale: de })}, ${formData.preferredTime} Uhr`
          : undefined,
        additionalInfo: formData.additionalInfo,
      };

      const { data, error } = await supabase.functions.invoke('send-demo-request', {
        body: requestData,
      });

      if (error) throw error;

      toast({
        title: "Anfrage übermittelt",
        description: "Deine Anfrage wurde übermittelt. Wir melden uns bei Dir.",
      });

      // Navigate to confirmation page
      setTimeout(() => {
        navigate("/demo-bestaetigung");
      }, 1000);
    } catch (error: any) {
      console.error("Error sending demo request:", error);
      toast({
        title: "Fehler",
        description: "Beim Versenden Deiner Anfrage ist ein Problem aufgetreten. Bitte versuche es erneut.",
        variant: "destructive"
      });
    }
  };

  const handleInterestToggle = (interest: string) => {
    setFormData(prev => ({
      ...prev,
      selectedInterests: prev.selectedInterests.includes(interest)
        ? prev.selectedInterests.filter(i => i !== interest)
        : [...prev.selectedInterests, interest]
    }));
  };

  return (
    <div className="min-h-screen" style={{ backgroundColor: 'hsl(var(--background-secondary))' }}>
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-lg border-b border-border">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="flex items-center justify-between h-20">
            <Button
              variant="ghost"
              onClick={() => navigate("/")}
              className="gap-2"
            >
              <ArrowLeft className="w-5 h-5" />
              Zurück
            </Button>
            <div className="flex items-center gap-4">
              <PhoneIcon className="w-8 h-8 text-primary" />
              <h2 className="text-2xl font-bold">
                <span className="text-primary">Call</span>
                <span className="text-accent">Pal</span>
              </h2>
            </div>
          </div>
        </div>
      </header>

      {/* Content */}
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 pt-28 sm:pt-32 pb-12 sm:pb-16">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="max-w-3xl mx-auto"
        >
          <div className="text-center mb-6 sm:mb-8 md:mb-12">
            <div className="inline-flex items-center gap-2 bg-primary/10 border border-primary/30 rounded-full px-3 py-1.5 mb-3 sm:px-4 sm:py-2 sm:mb-4 md:px-6 md:mb-6">
              <Calendar className="w-4 h-4 sm:w-4 sm:h-4 md:w-5 md:h-5 text-primary" />
              <span className="text-primary font-semibold text-xs sm:text-sm md:text-base">Demo anfragen</span>
            </div>
            <h1 className="text-2xl sm:text-3xl md:text-5xl font-bold mb-2 sm:mb-3 md:mb-4 px-2 leading-tight">
              Einsatz für Deinen <span className="text-primary">Betrieb prüfen</span>
            </h1>
            <p className="text-base sm:text-lg md:text-xl text-muted-foreground px-2 sm:px-4">
              Erzähl uns kurz von Deinem Betrieb – wir prüfen gemeinsam, ob CallPal passt.
            </p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6 md:space-y-8">
            {/* Unternehmensinformationen */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="bg-card/30 backdrop-blur-sm border border-border rounded-xl sm:rounded-2xl p-4 sm:p-6 md:p-8"
            >
              <div className="flex items-center gap-2 sm:gap-2 md:gap-3 mb-4 sm:mb-5 md:mb-6">
                <Building className="w-5 h-5 sm:w-5 sm:h-5 md:w-6 md:h-6 text-primary" />
                <h2 className="text-lg sm:text-xl md:text-2xl font-bold">Dein Betrieb</h2>
              </div>

              <div className="space-y-4 sm:space-y-5 md:space-y-6">
                <div>
                  <Label htmlFor="companyName" className="text-sm sm:text-base">Name des Betriebs *</Label>
                  <Input
                    id="companyName"
                    value={formData.companyName}
                    onChange={(e) => setFormData({ ...formData, companyName: e.target.value })}
                    placeholder="Dein Betrieb"
                    required
                    className="mt-1.5"
                  />
                </div>

                <div>
                  <Label htmlFor="contactName" className="text-sm sm:text-base">Kontaktperson *</Label>
                  <Input
                    id="contactName"
                    value={formData.contactName}
                    onChange={(e) => setFormData({ ...formData, contactName: e.target.value })}
                    placeholder="Vor- und Nachname"
                    required
                    className="mt-1.5"
                  />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 md:gap-6">
                  <div>
                    <Label htmlFor="email" className="text-sm sm:text-base">E-Mail *</Label>
                    <Input
                      id="email"
                      type="email"
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      placeholder="deine@email.ch"
                      required
                      className="mt-1.5"
                    />
                  </div>

                  <div>
                    <Label htmlFor="phone" className="text-sm sm:text-base">Telefon (optional)</Label>
                    <Input
                      id="phone"
                      type="tel"
                      value={formData.phone}
                      onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                      placeholder="+41 XX XXX XX XX"
                      className="mt-1.5"
                    />
                  </div>
                </div>

                <div>
                  <Label className="mb-2 sm:mb-3 block text-sm sm:text-base">Branche *</Label>
                  <RadioGroup
                    value={formData.industry}
                    onValueChange={(value) => setFormData({ ...formData, industry: value })}
                    className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 sm:gap-3"
                  >
                    {industries.map((industry) => (
                      <div key={industry} className="flex items-center space-x-2">
                        <RadioGroupItem value={industry} id={`industry-${industry}`} />
                        <Label htmlFor={`industry-${industry}`} className="cursor-pointer text-sm sm:text-base">
                          {industry}
                        </Label>
                      </div>
                    ))}
                  </RadioGroup>
                  {formData.industry === "Gastronomie" && (
                    <p className="mt-3 text-sm text-muted-foreground">
                      Gastronomie: aktuell für Pizza-Kuriere und Take-away. Bestellungen werden telefonisch aufgenommen
                      und für Dein Team erfasst – ohne automatische Übertragung in ein Kassen- oder Bestellsystem.
                    </p>
                  )}
                  
                </div>
              </div>
            </motion.div>

            {/* Interessengebiete */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="bg-card/30 backdrop-blur-sm border border-border rounded-xl sm:rounded-2xl p-4 sm:p-6 md:p-8"
            >
              <div className="flex items-center gap-2 sm:gap-2 md:gap-3 mb-4 sm:mb-5 md:mb-6">
                <Users className="w-5 h-5 sm:w-5 sm:h-5 md:w-6 md:h-6 text-primary" />
                <h2 className="text-lg sm:text-xl md:text-2xl font-bold">Wofür interessierst Du Dich?</h2>
              </div>

              <div className="space-y-3 sm:space-y-4">
                {interests.map((interest) => (
                  <div key={interest} className="flex items-center space-x-2.5 sm:space-x-3">
                    <Checkbox
                      id={`interest-${interest}`}
                      checked={formData.selectedInterests.includes(interest)}
                      onCheckedChange={() => handleInterestToggle(interest)}
                    />
                    <Label htmlFor={`interest-${interest}`} className="cursor-pointer text-sm sm:text-base">
                      {interest}
                    </Label>
                  </div>
                ))}
              </div>
            </motion.div>

            {/* Verfügbarkeit & Zusatzinfos */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="bg-card/30 backdrop-blur-sm border border-border rounded-xl sm:rounded-2xl p-4 sm:p-6 md:p-8"
            >
              <div className="flex items-center gap-2 sm:gap-2 md:gap-3 mb-4 sm:mb-5 md:mb-6">
                <Calendar className="w-5 h-5 sm:w-5 sm:h-5 md:w-6 md:h-6 text-primary" />
                <h2 className="text-lg sm:text-xl md:text-2xl font-bold">Verfügbarkeit & Details</h2>
              </div>

              <div className="space-y-4 sm:space-y-5 md:space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 md:gap-6">
                  <div>
                    <Label className="text-sm sm:text-base mb-2 block">Bevorzugtes Datum für ein Gespräch</Label>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          className={cn(
                            "w-full justify-start text-left font-normal mt-1.5",
                            !formData.preferredDate && "text-muted-foreground"
                          )}
                        >
                          <CalendarIcon className="mr-2 h-4 w-4" />
                          {formData.preferredDate ? (
                            format(formData.preferredDate, "PPP", { locale: de })
                          ) : (
                            <span>Datum wählen</span>
                          )}
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <CalendarComponent
                          mode="single"
                          selected={formData.preferredDate}
                          onSelect={(date) => setFormData({ ...formData, preferredDate: date })}
                          disabled={(date) => date < new Date()}
                          initialFocus
                          className={cn("p-3 pointer-events-auto")}
                          locale={de}
                        />
                      </PopoverContent>
                    </Popover>
                  </div>

                  <div>
                    <Label className="text-sm sm:text-base mb-2 block">Bevorzugte Uhrzeit</Label>
                    <Select
                      value={formData.preferredTime}
                      onValueChange={(value) => setFormData({ ...formData, preferredTime: value })}
                    >
                      <SelectTrigger className="w-full mt-1.5">
                        <SelectValue placeholder="Uhrzeit wählen">
                          {formData.preferredTime && (
                            <div className="flex items-center gap-2">
                              <Clock className="h-4 w-4" />
                              <span>{formData.preferredTime} Uhr</span>
                            </div>
                          )}
                        </SelectValue>
                      </SelectTrigger>
                      <SelectContent>
                        {timeSlots.map((time) => (
                          <SelectItem key={time} value={time}>
                            {time} Uhr
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground mt-1.5">
                      Geschäftszeiten: Mo-Fr, 09:00 - 17:00 Uhr
                    </p>
                  </div>
                </div>

                <div>
                  <Label htmlFor="additionalInfo" className="text-sm sm:text-base">Zusätzliche Informationen</Label>
                  <Textarea
                    id="additionalInfo"
                    value={formData.additionalInfo}
                    onChange={(e) => setFormData({ ...formData, additionalInfo: e.target.value })}
                    placeholder="Gibt es etwas, das wir vorab wissen sollten?"
                    rows={4}
                    className="mt-1.5"
                  />
                </div>
              </div>
            </motion.div>

            {/* Submit Button */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.4 }}
              className="flex flex-col sm:flex-row gap-2.5 sm:gap-3 md:gap-4 pt-2"
            >
              <Button
                type="button"
                variant="outline"
                size="lg"
                className="flex-1 w-full h-14 sm:h-12 text-base"
                onClick={() => navigate("/")}
              >
                Abbrechen
              </Button>
              <Button
                type="submit"
                variant="teal"
                size="lg"
                className="flex-1 w-full h-14 sm:h-12 text-base"
              >
                Einsatz für meinen Betrieb prüfen
              </Button>
            </motion.div>
          </form>
        </motion.div>
      </div>
    </div>
  );
}