import React, { useState, useEffect } from "react";
import { base44 } from "@/api/base44Client";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Zap, Send, Check, Edit3, MapPin, Clock, Users, AlertCircle, Sparkles, Mic, X, Calendar as CalendarIcon, ArrowLeft } from "lucide-react";
import { useToast } from "@/components/ui/use-toast";
import { motion, AnimatePresence } from "framer-motion";
import { format } from "date-fns";

// Helper function to convert 24-hour time to 12-hour format
const convertTo12Hour = (time24) => {
  if (!time24 || time24 === "—") return time24;
  
  try {
    const parts = time24.split(':');
    if (!parts || parts.length < 2) return time24;
    
    const hours = parseInt(parts[0], 10);
    const minutes = parseInt(parts[1], 10);
    
    if (isNaN(hours) || isNaN(minutes)) return time24;
    
    const period = hours >= 12 ? 'PM' : 'AM';
    const hours12 = hours % 12 || 12;
    const minutesStr = minutes.toString().padStart(2, '0');
    
    return `${hours12}:${minutesStr} ${period}`;
  } catch (error) {
    console.error('Error converting time:', error);
    return time24;
  }
};

export default function RapidOrder() {
  const navigate = useNavigate();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const [message, setMessage] = useState("");
  const [conversation, setConversation] = useState([]);
  const [detectedOrder, setDetectedOrder] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [isListening, setIsListening] = useState(false);
  const [submissionTime, setSubmissionTime] = useState(null);

  const { data: user } = useQuery({
    queryKey: ['current-user-rapid'],
    queryFn: () => base44.auth.me(),
  });

  const { data: businesses } = useQuery({
    queryKey: ['user-businesses'],
    queryFn: () => base44.entities.Business.filter({ contact_name: user?.full_name }),
    enabled: !!user,
    initialData: [],
  });

  const createRapidOrderMutation = useMutation({
    mutationFn: (orderData) => base44.entities.Event.create(orderData),
    onSuccess: (data) => {
      queryClient.invalidateQueries({ queryKey: ['events'] });
      queryClient.invalidateQueries({ queryKey: ['client-events'] });
      
      const now = new Date();
      setSubmissionTime(now);
      
      toast({
        title: "✅ RAPID Order Created",
        description: "Order sent to preferred vendor with priority notification",
      });

      // Show success message in chat
      setConversation(prev => [...prev, { 
        role: 'assistant', 
        content: `🚀 **Order Submitted Successfully!**\n\nOrder Number: **${data.id?.slice(-8) || 'RAPID-001'}**\nSubmitted: **${format(now, 'h:mm:ss a')}**\n\nYour preferred vendor has been notified and will assign staff shortly.`,
        isSuccess: true
      }]);

      // Reset after delay
      setTimeout(() => {
        navigate(createPageUrl("ClientDashboard"));
      }, 3000);
    },
  });

  const analyzeMessage = async (msg) => {
    setIsProcessing(true);
    
    setConversation(prev => [...prev, { role: 'user', content: msg }]);

    try {
      const response = await base44.integrations.Core.InvokeLLM({
        prompt: `You are an order assistant. Analyze this message and extract order details:
        
Message: "${msg}"
Current user: ${user?.full_name}
User's locations: ${businesses.map(b => b.business_name).join(', ')}

Extract:
1. Urgency keywords (ASAP, today, emergency, call out, urgent, rapid, now)
2. Role/position needed (cook, bartender, server, dishwasher, etc.)
3. Number of staff (if mentioned, parse the number correctly - e.g., "5 cooks" = 5, "need 3 servers" = 3)
4. End time (if mentioned, extract the time - e.g., "until 5am" = "05:00", "until 11pm" = "23:00", "until midnight" = "00:00")
5. Location (if mentioned, otherwise use first available location)

IMPORTANT: 
- Make sure to correctly extract the number of staff from phrases like "need 5 cooks" or "I need 3 bartenders"
- If end time is mentioned (e.g., "until 5am", "till 11pm"), extract it in 24-hour format (e.g., "05:00", "23:00")
- If no end time is mentioned, leave it as null

Return a concise summary.`,
        response_json_schema: {
          type: "object",
          properties: {
            is_urgent: { type: "boolean" },
            role: { type: "string" },
            count: { type: "number" },
            location: { type: "string" },
            end_time: { type: "string" }
          }
        }
      });

      const parsed = response;
      const primaryLocation = businesses[0]?.business_name || "Primary Location";
      
      // Ensure count is properly set - default to 1 if not detected
      const staffCount = parsed.count && parsed.count > 0 ? parsed.count : 1;
      
      // Get current time for start_time (when ASAP)
      const now = new Date();
      const currentTime = format(now, 'HH:mm');
      
      // Handle end_time - use parsed end time or current time as confirmation time
      const endTime = parsed.end_time || currentTime;
      
      const order = {
        is_rapid: parsed.is_urgent || true,
        role: parsed.role || "Staff Member",
        count: staffCount,
        location: parsed.location || primaryLocation,
        start_time: currentTime, // Always use current time for ASAP orders (24-hour format for storage)
        end_time: endTime, // Use parsed end time or current time (24-hour format for storage)
        start_time_display: convertTo12Hour(currentTime), // For display
        end_time_display: convertTo12Hour(endTime), // For display
        business_name: primaryLocation,
        hub: businesses[0]?.hub_building || "Main Hub",
        submission_time: now // Store the actual submission time
      };

      setDetectedOrder(order);

      const aiMessage = `Is this a RAPID ORDER for **${order.count} ${order.role}${order.count > 1 ? 's' : ''}** at **${order.location}**?\n\nStart Time: ${order.start_time_display}\nEnd Time: ${order.end_time_display}`;
      
      setConversation(prev => [...prev, { 
        role: 'assistant', 
        content: aiMessage,
        showConfirm: true 
      }]);

    } catch (error) {
      setConversation(prev => [...prev, { 
        role: 'assistant', 
        content: "I couldn't process that. Please provide more details like: role needed, how many, and when." 
      }]);
    } finally {
      setIsProcessing(false);
    }
  };

  const handleSendMessage = () => {
    if (!message.trim()) return;
    analyzeMessage(message);
    setMessage("");
  };

  const handleVoiceInput = () => {
    if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
      toast({
        title: "Voice not supported",
        description: "Your browser doesn't support voice input",
        variant: "destructive",
      });
      return;
    }

    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    const recognition = new SpeechRecognition();
    
    recognition.onstart = () => setIsListening(true);
    recognition.onend = () => setIsListening(false);
    
    recognition.onresult = (event) => {
      const transcript = event.results[0][0].transcript;
      setMessage(transcript);
      analyzeMessage(transcript);
    };

    recognition.onerror = () => {
      setIsListening(false);
      toast({
        title: "Voice input failed",
        description: "Please try typing instead",
        variant: "destructive",
      });
    };

    recognition.start();
  };

  const handleConfirmOrder = () => {
    if (!detectedOrder) return;

    const now = new Date();
    const confirmTime = format(now, 'HH:mm');
    const confirmTime12Hour = convertTo12Hour(confirmTime);
    
    // Create comprehensive order data with proper requested field and actual times
    const orderData = {
      event_name: `RAPID: ${detectedOrder.count} ${detectedOrder.role}${detectedOrder.count > 1 ? 's' : ''}`,
      is_rapid: true,
      status: "Pending",
      business_name: detectedOrder.business_name,
      hub: detectedOrder.hub,
      event_location: detectedOrder.location,
      date: now.toISOString().split('T')[0],
      requested: Number(detectedOrder.count), // Ensure it's a number
      client_name: user?.full_name,
      client_email: user?.email,
      notes: `RAPID ORDER - Submitted at ${detectedOrder.start_time_display} - Confirmed at ${confirmTime12Hour}\nStart: ${detectedOrder.start_time_display} | End: ${detectedOrder.end_time_display}`,
      shifts: [{
        shift_name: "Emergency Shift",
        location: detectedOrder.location,
        roles: [{
          role: detectedOrder.role,
          count: Number(detectedOrder.count), // Ensure it's a number
          start_time: detectedOrder.start_time, // Store in 24-hour format
          end_time: detectedOrder.end_time // Store in 24-hour format
        }]
      }]
    };

    console.log('Creating RAPID order with data:', orderData); // Debug log

    createRapidOrderMutation.mutate(orderData);
  };

  const handleEditOrder = () => {
    setConversation(prev => [...prev, { 
      role: 'assistant', 
      content: "Please describe what you'd like to change." 
    }]);
    setDetectedOrder(null);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-red-50 via-orange-50 to-yellow-50 p-6">
      <div className="max-w-5xl mx-auto space-y-6">
        
        {/* Header */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Button
              variant="ghost"
              size="icon"
              onClick={() => navigate(createPageUrl("ClientDashboard"))}
              className="hover:bg-white/50"
            >
              <ArrowLeft className="w-5 h-5" />
            </Button>
            <div>
              <div className="flex items-center gap-3 mb-2">
                <div className="w-12 h-12 bg-gradient-to-br from-red-500 to-orange-500 rounded-xl flex items-center justify-center shadow-lg">
                  <Zap className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-3xl font-bold text-red-700 flex items-center gap-2">
                    <Sparkles className="w-6 h-6" />
                    RAPID Order
                  </h1>
                  <p className="text-sm text-red-600 mt-1">Emergency staffing in minutes</p>
                </div>
              </div>
            </div>
          </div>
          
          <div className="text-right">
            <div className="flex items-center gap-2 text-sm text-slate-600 mb-1">
              <CalendarIcon className="w-4 h-4" />
              <span>{format(new Date(), 'EEEE, MMMM d, yyyy')}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-slate-600">
              <Clock className="w-4 h-4" />
              <span>{format(new Date(), 'h:mm a')}</span>
            </div>
          </div>
        </div>

        <Card className="bg-white border-2 border-red-300 shadow-2xl">
          <CardHeader className="border-b border-red-200 bg-gradient-to-r from-red-50 to-orange-50">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg font-bold text-red-700">
                Tell us what you need
              </CardTitle>
              <Badge className="bg-red-600 text-white font-bold text-sm px-4 py-2 shadow-md animate-pulse">
                URGENT
              </Badge>
            </div>
          </CardHeader>

          <CardContent className="p-6">
            {/* Chat Messages */}
            <div className="space-y-4 mb-6 max-h-[500px] overflow-y-auto">
              {conversation.length === 0 && (
                <div className="text-center py-12">
                  <div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-red-500 to-orange-500 rounded-2xl flex items-center justify-center shadow-2xl">
                    <Zap className="w-10 h-10 text-white" />
                  </div>
                  <h3 className="font-bold text-2xl text-slate-900 mb-3">Need staff urgently?</h3>
                  <p className="text-base text-slate-600 mb-6">Type or speak what you need, I'll handle the rest</p>
                  <div className="text-left max-w-lg mx-auto space-y-3">
                    <div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl border-2 border-blue-200 text-sm">
                      <strong className="text-blue-900">Example:</strong> <span className="text-slate-700">"We had a call out. Need 2 cooks ASAP"</span>
                    </div>
                    <div className="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-xl border-2 border-purple-200 text-sm">
                      <strong className="text-purple-900">Example:</strong> <span className="text-slate-700">"Need 5 bartenders ASAP until 5am"</span>
                    </div>
                    <div className="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-xl border-2 border-green-200 text-sm">
                      <strong className="text-green-900">Example:</strong> <span className="text-slate-700">"Emergency! Need 3 servers right now till midnight"</span>
                    </div>
                  </div>
                </div>
              )}

              <AnimatePresence>
                {conversation.map((msg, idx) => (
                  <motion.div
                    key={idx}
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0 }}
                    className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
                  >
                    <div className={`max-w-[85%] ${
                      msg.role === 'user' 
                        ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white' 
                        : msg.isSuccess
                        ? 'bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-300'
                        : 'bg-white border-2 border-red-200'
                    } rounded-2xl p-5 shadow-lg`}>
                      {msg.role === 'assistant' && !msg.isSuccess && (
                        <div className="flex items-center gap-2 mb-3">
                          <div className="w-7 h-7 bg-gradient-to-br from-red-500 to-orange-500 rounded-full flex items-center justify-center">
                            <Sparkles className="w-4 h-4 text-white" />
                          </div>
                          <span className="text-xs font-bold text-red-600">AI Assistant</span>
                        </div>
                      )}
                      <p className={`text-base whitespace-pre-line ${
                        msg.role === 'user' ? 'text-white' : 
                        msg.isSuccess ? 'text-green-900' :
                        'text-slate-900'
                      }`}>
                        {msg.content}
                      </p>

                      {msg.showConfirm && detectedOrder && (
                        <div className="mt-5 space-y-4">
                          <div className="grid grid-cols-2 gap-4 p-4 bg-gradient-to-br from-slate-50 to-blue-50 rounded-xl border-2 border-blue-300">
                            <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                                <Users className="w-5 h-5 text-white" />
                              </div>
                              <div>
                                <p className="text-xs text-slate-500 font-semibold">Staff Needed</p>
                                <p className="font-bold text-base text-slate-900">{detectedOrder.count} {detectedOrder.role}{detectedOrder.count > 1 ? 's' : ''}</p>
                              </div>
                            </div>
                            <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                                <MapPin className="w-5 h-5 text-white" />
                              </div>
                              <div>
                                <p className="text-xs text-slate-500 font-semibold">Location</p>
                                <p className="font-bold text-base text-slate-900">{detectedOrder.location}</p>
                              </div>
                            </div>
                            <div className="flex items-center gap-3 col-span-2">
                              <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                                <Clock className="w-5 h-5 text-white" />
                              </div>
                              <div>
                                <p className="text-xs text-slate-500 font-semibold">Time</p>
                                <p className="font-bold text-base text-slate-900">
                                  Start: {detectedOrder.start_time_display} | End: {detectedOrder.end_time_display}
                                </p>
                              </div>
                            </div>
                          </div>

                          <div className="flex gap-3">
                            <Button
                              onClick={handleConfirmOrder}
                              disabled={createRapidOrderMutation.isPending}
                              className="flex-1 bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 text-white font-bold shadow-xl text-base py-6"
                            >
                              <Check className="w-5 h-5 mr-2" />
                              {createRapidOrderMutation.isPending ? "Creating..." : "CONFIRM & SEND"}
                            </Button>
                            <Button
                              onClick={handleEditOrder}
                              variant="outline"
                              className="border-2 border-red-300 hover:bg-red-50 text-base py-6"
                            >
                              <Edit3 className="w-5 h-5 mr-2" />
                              EDIT
                            </Button>
                          </div>
                        </div>
                      )}
                    </div>
                  </motion.div>
                ))}
              </AnimatePresence>

              {isProcessing && (
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  className="flex justify-start"
                >
                  <div className="bg-white border-2 border-red-200 rounded-2xl p-5 shadow-lg">
                    <div className="flex items-center gap-3">
                      <div className="w-7 h-7 bg-gradient-to-br from-red-500 to-orange-500 rounded-full flex items-center justify-center animate-pulse">
                        <Sparkles className="w-4 h-4 text-white" />
                      </div>
                      <span className="text-base text-slate-600">Processing your request...</span>
                    </div>
                  </div>
                </motion.div>
              )}
            </div>

            {/* Input */}
            <div className="space-y-4">
              <div className="flex gap-2">
                <Textarea
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  onKeyPress={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault();
                      handleSendMessage();
                    }
                  }}
                  placeholder="Type or speak... (e.g., 'Need 5 cooks ASAP until 5am')"
                  className="flex-1 border-2 border-red-300 focus:border-red-500 text-base resize-none"
                  rows={3}
                  disabled={isProcessing}
                />
              </div>

              <div className="flex gap-2">
                <Button
                  onClick={handleVoiceInput}
                  disabled={isProcessing || isListening}
                  variant="outline"
                  className={`border-2 ${isListening ? 'border-red-500 bg-red-50' : 'border-red-300'} hover:bg-red-50 text-base py-6 px-6`}
                >
                  <Mic className={`w-5 h-5 mr-2 ${isListening ? 'animate-pulse text-red-600' : ''}`} />
                  {isListening ? 'Listening...' : 'Speak'}
                </Button>
                <Button
                  onClick={handleSendMessage}
                  disabled={!message.trim() || isProcessing}
                  className="flex-1 bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 text-white font-bold shadow-xl text-base py-6"
                >
                  <Send className="w-5 h-5 mr-2" />
                  Send Message
                </Button>
              </div>
            </div>

            {/* Helper Text */}
            <div className="mt-4 p-4 bg-blue-50 border-2 border-blue-200 rounded-xl">
              <div className="flex items-start gap-3">
                <AlertCircle className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                <div className="text-sm text-blue-800">
                  <strong>Tip:</strong> Include role, quantity, and urgency for fastest processing. 
                  Optionally add end time like "until 5am" or "till midnight". 
                  AI will auto-detect your location and send to your preferred vendor with priority notification.
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}