PromptTech/frontend/src/pages/ServiceDetail.js

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: "",
  });

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

  useEffect(() => {
    fetchService();
  }, [id]);

  // Auto-refresh every 5 seconds for real-time updates
  useEffect(() => {
    const interval = setInterval(() => {
      fetchService(true);
    }, 5000);

    return () => clearInterval(interval);
  }, [id]);

  // Refresh when user returns to the tab
  useEffect(() => {
    const handleVisibilityChange = () => {
      if (!document.hidden) {
        fetchService();
      }
    };

    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () =>
      document.removeEventListener("visibilitychange", handleVisibilityChange);
  }, [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>
              <div
                className="text-lg text-muted-foreground leading-relaxed prose prose-lg max-w-none"
                data-testid="service-description"
                dangerouslySetInnerHTML={{ __html: service.description }}
              />
            </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">
                  {service.price > 0 ? "Starting from" : "Price"}
                </span>
                <p
                  className="text-3xl font-bold font-['Outfit']"
                  data-testid="service-price"
                >
                  {service.price > 0
                    ? `$${service.price.toFixed(2)}`
                    : "Contact for quote"}
                </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;