'use client';

/**
 * LiveDispatchVisual Component
 * 
 * Interactive stacked Live Match UI visualizing the Uber-style beauty dispatch engine:
 * 1. Live Request Notification (Searching radar / progress)
 * 2. Overlapping Partner Acceptance Card (Salon match & Doorstep ETA)
 * 3. Verified dispatch metrics badge
 */

import React from 'react';
import { CheckCircle2, Navigation, Star, Clock, MapPin } from 'lucide-react';

export function LiveDispatchVisual() {
  return (
    <div className="relative w-full max-w-lg mx-auto lg:max-w-none min-h-[460px] flex items-center justify-center p-2">
      {/* Subtle Background Radial Tech Glow */}
      <div className="absolute inset-0 bg-gradient-to-tr from-rose-50/50 via-zinc-50/20 to-amber-50/30 rounded-3xl -z-10" />

      {/* ================= Card 1 (Top / Trigger): Live Request in Progress ================= */}
      <div className="absolute top-4 inset-inline-start-2 sm:inset-inline-start-6 z-20 w-[92%] sm:w-[360px] bg-white rounded-2xl p-4.5 border border-zinc-100 shadow-xl text-start transition-transform hover:-translate-y-1 duration-300">
        <div className="flex items-center justify-between gap-2 mb-3">
          <div className="flex items-center gap-2">
            <span className="relative flex h-3 w-3">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75" />
              <span className="relative inline-flex rounded-full h-3 w-3 bg-rose-500" />
            </span>
            <span className="text-[11px] font-extrabold uppercase tracking-wider text-rose-600">
              Live Dispatch
            </span>
          </div>
          <span className="text-[10px] font-mono text-zinc-400">Just now</span>
        </div>

        <div className="flex items-start gap-3">
          <div className="w-10 h-10 rounded-xl bg-zinc-900 text-white flex items-center justify-center text-lg flex-shrink-0">
            💅
          </div>
          <div className="flex-1 min-w-0">
            <h4 className="text-xs font-bold text-zinc-900 truncate">
              Gel Manicure &amp; Spa Pedicure
            </h4>
            <p className="text-[11px] text-zinc-500 flex items-center gap-1 mt-0.5">
              <MapPin className="w-3 h-3 text-zinc-400 flex-shrink-0" />
              <span>Downtown Dubai, Blvd</span>
            </p>
          </div>
        </div>

        {/* Searching Progress Bar */}
        <div className="mt-3.5 pt-3 border-t border-zinc-100">
          <div className="flex items-center justify-between text-[10px] font-semibold text-zinc-500 mb-1.5">
            <span>Searching 18 nearby salons...</span>
            <span className="text-zinc-900 font-mono font-bold">Matching</span>
          </div>
          <div className="w-full bg-zinc-100 rounded-full h-1.5 overflow-hidden">
            <div className="bg-gradient-to-r from-rose-500 to-amber-500 h-1.5 rounded-full w-3/4 animate-pulse" />
          </div>
        </div>
      </div>

      {/* ================= Card 2 (Overlapping Below): Partner Accepted & Preparing ================= */}
      <div className="relative z-30 top-24 sm:top-20 inset-inline-start-4 sm:inset-inline-start-12 w-[94%] sm:w-[390px] bg-white rounded-2xl p-5 border border-zinc-100 shadow-2xl text-start transition-transform hover:-translate-y-1 duration-300">
        {/* Match Header */}
        <div className="flex items-center justify-between gap-2 mb-3.5">
          <div className="flex items-center gap-1.5 bg-emerald-50 text-emerald-800 border border-emerald-200/80 px-2.5 py-1 rounded-full text-xs font-bold">
            <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600" />
            <span>Match Confirmed</span>
          </div>
          <span className="text-[11px] font-semibold text-emerald-600 flex items-center gap-1">
            <Clock className="w-3.5 h-3.5" />
            <span>ETA 25 mins</span>
          </span>
        </div>

        {/* Salon / Pro Details */}
        <div className="flex items-center gap-3 mb-4">
          <div className="relative">
            <div className="w-13 h-13 rounded-2xl bg-gradient-to-tr from-zinc-900 to-zinc-700 text-white font-bold text-base flex items-center justify-center shadow-md">
              GS
            </div>
            <span className="absolute -bottom-1 -end-1 w-4 h-4 rounded-full bg-emerald-500 border-2 border-white flex items-center justify-center text-[8px] text-white">
              ✓
            </span>
          </div>

          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-1.5">
              <h3 className="text-sm font-extrabold text-zinc-900 truncate">
                Glow Salon Partner
              </h3>
              <div className="flex items-center gap-0.5 text-amber-500 font-bold text-xs">
                <Star className="w-3 h-3 fill-amber-400" />
                <span>4.9</span>
              </div>
            </div>
            <p className="text-xs text-zinc-500 font-medium truncate">
              Senior Beautician: Sarah K.
            </p>
          </div>
        </div>

        {/* Action / Doorstep Status Box */}
        <div className="bg-zinc-50 rounded-xl p-3 border border-zinc-100/90 flex items-center justify-between gap-3">
          <div className="flex items-center gap-2 text-xs font-medium text-zinc-700">
            <Navigation className="w-4 h-4 text-zinc-900 flex-shrink-0" />
            <span className="truncate">Sarah is preparing sterile kit &amp; en route</span>
          </div>
          <span className="text-[10px] font-bold text-zinc-900 bg-white border border-zinc-200 px-2 py-1 rounded-md shadow-2xs whitespace-nowrap">
            Doorstep
          </span>
        </div>
      </div>

      {/* ================= Card 3 (Bottom Accent): Metric Badge ================= */}
      <div className="absolute -bottom-2 inset-inline-end-2 sm:inset-inline-end-6 z-40 bg-zinc-950 text-white rounded-2xl p-3.5 px-4 shadow-2xl border border-zinc-800 text-start flex items-center gap-3">
        <div className="w-8 h-8 rounded-xl bg-zinc-800 flex items-center justify-center text-sm flex-shrink-0 text-amber-400">
          ⚡
        </div>
        <div>
          <p className="text-xs font-bold text-white leading-tight">
            45s Average Match Time
          </p>
          <p className="text-[10px] text-zinc-400">
            Over 500+ verified salons across UAE
          </p>
        </div>
      </div>
    </div>
  );
}