'use client';

import React, { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Phone, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { useToast } from '@/hooks/use-toast';
import { recordCallInitiated } from '@/app/actions';

const AGENT_NUMBER = '09773122250';
const CALLER_ID = '66484374';
const API_URL = 'https://demo.voitekk.com/voitekk/callingApis/click2CallPstnFromWeb';

const widgetSchema = z.object({
  customerName: z.string().trim().min(1, 'Full name is required').min(2, 'Name must be at least 2 characters'),
  email: z.string().trim().min(1, 'Email address is required').email('Please enter a valid email address'),
  phoneNumber: z.string().trim()
    .min(1, 'Phone number is required')
    .length(10, 'Phone number must be exactly 10 digits')
    .regex(/^\d+$/, 'Phone number must contain only digits'),
});

type WidgetData = z.infer<typeof widgetSchema>;

export function ClickToCallWidget() {
  const [open, setOpen] = useState(false);
  const { toast } = useToast();
  
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm<WidgetData>({
    resolver: zodResolver(widgetSchema),
  });

  // Auto-trigger logic: Open after 30 seconds
  useEffect(() => {
    const timer = setTimeout(() => {
      setOpen(true);
    }, 30000);

    return () => clearTimeout(timer);
  }, []);

  const onSubmit = async (data: WidgetData) => {
    try {
      const payload = {
        customerNumber: `0${data.phoneNumber}`,
        agentNumber: AGENT_NUMBER,
        customerName: data.customerName,
        customerEmail: data.email,
        callerId: CALLER_ID,
      };

      await recordCallInitiated({
        name: data.customerName,
        email: data.email,
        phone: data.phoneNumber,
      });

      const response = await fetch(API_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        console.warn('Telephony API bridge failed, but lead was recorded.');
      }

      toast({
        title: 'Connecting your call...',
        description: 'Please wait while we bridge the call to our representative.',
      });
      
      reset();
      setOpen(false);
    } catch (error) {
      console.error('Widget Submission Error:', error);
      toast({
        variant: 'destructive',
        title: 'Request Received',
        description: 'We have logged your request and an expert will call you shortly.',
      });
      reset();
      setOpen(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <div className="fixed right-0 top-[120px] z-[101]">
          <Button 
            className="rounded-l-2xl rounded-r-none h-auto py-6 px-3 shadow-2xl flex flex-col items-center gap-3 transition-all hover:pl-5 group bg-primary text-primary-foreground border-y border-l border-primary-foreground/20" 
          >
            <Phone className="w-5 h-5 group-hover:scale-110 transition-transform" />
            <span className="font-bold text-xs uppercase tracking-widest [writing-mode:vertical-rl] rotate-180">
              Call Now
            </span>
          </Button>
        </div>
      </DialogTrigger>
      <DialogContent className="sm:max-w-lg z-[102]">
        <DialogHeader className="pb-4">
          <DialogTitle className="text-3xl font-bold flex items-center gap-3">
            <Phone className="w-8 h-8 text-primary" />
            Call Now
          </DialogTitle>
        </DialogHeader>
        <div className="space-y-6">
          <p className="text-muted-foreground text-center mb-2 text-lg">
            Enter your details below and we will connect you with an expert instantly.
          </p>
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
            <div className="space-y-2">
              <label className="text-sm font-medium">Full Name *</label>
              <Input 
                placeholder="Your Name" 
                {...register('customerName')}
                className={errors.customerName ? 'border-destructive focus-visible:ring-destructive' : ''}
              />
              {errors.customerName && <p className="text-xs text-destructive font-medium">{errors.customerName.message}</p>}
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">Work Email *</label>
              <Input 
                type="email" 
                placeholder="you@company.com" 
                {...register('email')}
                className={errors.email ? 'border-destructive focus-visible:ring-destructive' : ''}
              />
              {errors.email && <p className="text-xs text-destructive font-medium">{errors.email.message}</p>}
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">Phone Number *</label>
              <Input 
                type="tel" 
                maxLength={10}
                placeholder="Please enter your 10 digit phone number" 
                {...register('phoneNumber')}
                className={errors.phoneNumber ? 'border-destructive focus-visible:ring-destructive' : ''}
              />
              {errors.phoneNumber && <p className="text-xs text-destructive font-medium">{errors.phoneNumber.message}</p>}
            </div>
            <Button type="submit" className="w-full h-14 text-xl font-bold" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-6 w-6 animate-spin" />
                  Connecting...
                </>
              ) : (
                "Let's Talk"
              )}
            </Button>
            <p className="text-[11px] text-center text-muted-foreground">
              By clicking "Let's Talk," you consent to our Privacy Policy and Terms & Conditions. Our team will reach out to you within the next 5 minutes.
            </p>
          </form>
        </div>
      </DialogContent>
    </Dialog>
  );
}