import React, { useState, useEffect } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom';
import axios from 'axios';
import { ArrowLeft, Clock, Calendar, Check, Phone, Mail, User } from 'lucide-react';
import { Button } from '../components/ui/button';
import { Badge } from '../components/ui/badge';
import { Input } from '../components/ui/input';
import { Textarea } from '../components/ui/textarea';
import { Label } from '../components/ui/label';
import { Separator } from '../components/ui/separator';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '../components/ui/dialog';
import { toast } from 'sonner';

const API = `${process.env.REACT_APP_BACKEND_URL}/api`;

const ServiceDetail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [service, setService] = useState(null);
  const [loading, setLoading] = useState(true);
  const [bookingOpen, setBookingOpen] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    preferred_date: '',
    notes: ''
  });

  useEffect(() => {
    const fetchService = async () => {
      try {
        const response = await axios.get(`${API}/services/${id}`);
        setService(response.data);
      } catch (error) {
        console.error('Failed to fetch service:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchService();
  }, [id]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);

    try {
      await axios.post(`${API}/services/book`, {
        service_id: service.id,
        ...formData
      });
      toast.success('Booking submitted successfully! We will contact you soon.');
      setBookingOpen(false);
      setFormData({ name: '', email: '', phone: '', preferred_date: '', notes: '' });
    } catch (error) {
      toast.error('Failed to submit booking. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen py-8 md:py-12">
        <div className="max-w-4xl mx-auto px-4 md:px-8">
          <div className="animate-pulse space-y-8">
            <div className="aspect-video bg-muted rounded-2xl" />
            <div className="h-8 bg-muted rounded w-1/3" />
            <div className="h-24 bg-muted rounded" />
          </div>
        </div>
      </div>
    );
  }

  if (!service) {
    return (
      <div className="min-h-screen py-8 md:py-12">
        <div className="max-w-4xl mx-auto px-4 md:px-8 text-center py-16">
          <h2 className="text-2xl font-bold mb-4 font-['Outfit']">Service not found</h2>
          <Link to="/services">
            <Button className="rounded-full">Back to Services</Button>
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen py-8 md:py-12">
      <div className="max-w-4xl mx-auto px-4 md:px-8">
        {/* Breadcrumb */}
        <Link
          to="/services"
          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-8 transition-colors"
          data-testid="back-to-services"
        >
          <ArrowLeft className="h-4 w-4" />
          Back to Services
        </Link>

        {/* Hero Image */}
        <div className="relative aspect-video rounded-2xl overflow-hidden mb-8">
          <img
            src={service.image_url}
            alt={service.name}
            className="w-full h-full object-cover"
            data-testid="service-image"
          />
          <Badge className="absolute top-4 left-4 capitalize">
            {service.category}
          </Badge>
        </div>

        {/* Content */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 space-y-6">
            <div>
              <h1 className="text-3xl md:text-4xl font-bold font-['Outfit'] mb-4" data-testid="service-title">
                {service.name}
              </h1>
              <p className="text-lg text-muted-foreground leading-relaxed" data-testid="service-description">
                {service.description}
              </p>
            </div>

            <Separator />

            {/* What's Included */}
            <div>
              <h3 className="text-xl font-semibold mb-4 font-['Outfit']">What's Included</h3>
              <ul className="space-y-3">
                {[
                  'Free diagnostic assessment',
                  'Quality replacement parts (if needed)',
                  'Professional service by certified technicians',
                  '30-day warranty on all repairs',
                  'Post-service support'
                ].map((item, idx) => (
                  <li key={idx} className="flex items-center gap-3">
                    <div className="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                      <Check className="h-3 w-3 text-primary" />
                    </div>
                    <span className="text-muted-foreground">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            <Separator />

            {/* Process */}
            <div>
              <h3 className="text-xl font-semibold mb-4 font-['Outfit']">How It Works</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {[
                  { step: '1', title: 'Book', desc: 'Schedule your appointment online' },
                  { step: '2', title: 'Drop Off', desc: 'Bring your device to our store' },
                  { step: '3', title: 'Pick Up', desc: 'Get your device back fixed' }
                ].map((item, idx) => (
                  <div key={idx} className="text-center p-4 rounded-xl bg-muted/50">
                    <div className="w-10 h-10 mx-auto mb-3 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
                      {item.step}
                    </div>
                    <h4 className="font-semibold mb-1 font-['Outfit']">{item.title}</h4>
                    <p className="text-sm text-muted-foreground">{item.desc}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <div className="lg:col-span-1">
            <div className="sticky top-24 border border-border rounded-2xl p-6 bg-card space-y-6">
              <div>
                <span className="text-sm text-muted-foreground">Starting from</span>
                <p className="text-3xl font-bold font-['Outfit']" data-testid="service-price">
                  ${service.price.toFixed(2)}
                </p>
              </div>

              <div className="flex items-center gap-3 text-sm">
                <Clock className="h-4 w-4 text-muted-foreground" />
                <span>Duration: {service.duration}</span>
              </div>

              <Dialog open={bookingOpen} onOpenChange={setBookingOpen}>
                <DialogTrigger asChild>
                  <Button className="w-full rounded-full btn-press" size="lg" data-testid="book-now-button">
                    Book Now
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-md">
                  <DialogHeader>
                    <DialogTitle className="font-['Outfit']">Book {service.name}</DialogTitle>
                  </DialogHeader>
                  <form onSubmit={handleSubmit} className="space-y-4 mt-4">
                    <div className="space-y-2">
                      <Label htmlFor="name">Full Name</Label>
                      <div className="relative">
                        <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                        <Input
                          id="name"
                          placeholder="John Doe"
                          className="pl-10"
                          value={formData.name}
                          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                          required
                          data-testid="booking-name"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="email">Email</Label>
                      <div className="relative">
                        <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                        <Input
                          id="email"
                          type="email"
                          placeholder="john@example.com"
                          className="pl-10"
                          value={formData.email}
                          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                          required
                          data-testid="booking-email"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="phone">Phone</Label>
                      <div className="relative">
                        <Phone className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                        <Input
                          id="phone"
                          type="tel"
                          placeholder="+1 234 567 890"
                          className="pl-10"
                          value={formData.phone}
                          onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                          required
                          data-testid="booking-phone"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="date">Preferred Date</Label>
                      <div className="relative">
                        <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                        <Input
                          id="date"
                          type="date"
                          className="pl-10"
                          value={formData.preferred_date}
                          onChange={(e) => setFormData({ ...formData, preferred_date: e.target.value })}
                          required
                          data-testid="booking-date"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="notes">Additional Notes (Optional)</Label>
                      <Textarea
                        id="notes"
                        placeholder="Describe your issue..."
                        value={formData.notes}
                        onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                        data-testid="booking-notes"
                      />
                    </div>

                    <Button 
                      type="submit" 
                      className="w-full rounded-full" 
                      disabled={submitting}
                      data-testid="submit-booking"
                    >
                      {submitting ? 'Submitting...' : 'Submit Booking'}
                    </Button>
                  </form>
                </DialogContent>
              </Dialog>

              <p className="text-xs text-center text-muted-foreground">
                No payment required for booking
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ServiceDetail;