"use client"

import { useRef, useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useToast } from "@/hooks/use-toast"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Truck, Users, MapPin, Copy, Check, Share2, Phone, Bike, Car, BadgeCheck, Globe } from "lucide-react"

interface DeliveryMenModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function DeliveryMenModal({ open, onOpenChange }: DeliveryMenModalProps) {
  const { toast } = useToast()
  const [copied, setCopied] = useState(false)
  const registrationLink = typeof window !== 'undefined'
    ? `${window.location.origin}/register`
    : '/register'

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(registrationLink)
      setCopied(true)
      toast({ title: "Link Copied!", description: "Share this link with delivery men to register." })
      setTimeout(() => setCopied(false), 2000)
    } catch {
      toast({ title: "Error", description: "Could not copy link", variant: "destructive" })
    }
  }

  const handleShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: "Register as a Delivery Partner on Affiliate+",
          text: "Join the Affiliate+ delivery network and get connected with sellers who need delivery services. Register here:",
          url: registrationLink,
        })
      } catch {
        // User cancelled
      }
    } else {
      handleCopy()
    }
  }

  const tips = [
    {
      title: "Find Local Delivery Men",
      icon: <Users className="h-5 w-5 text-emerald-500" />,
      description: "Visit the Delivery Men board to browse trusted delivery partners near you. Filter by state and vehicle type to find the right match.",
    },
    {
      title: "Invite Your Own Delivery Men",
      icon: <Share2 className="h-5 w-5 text-purple-500" />,
      description: "Already know reliable delivery men in your area? Share the registration link below — they can create a profile and become discoverable by other sellers too!",
    },
    {
      title: "How to Arrange Delivery",
      icon: <Truck className="h-5 w-5 text-amber-500" />,
      description: "1. Browse or invite a delivery man\n2. Contact them to negotiate price based on buyer's location\n3. After pickup, update the order tracking status\n4. Buyer tracks progress and confirms receipt",
    },
    {
      title: "For International Sellers",
      icon: <Globe className="h-5 w-5 text-blue-500" />,
      description: "Visit local logistics parks or transport companies in your country. Compare rates and delivery times. Use courier services for cross-border shipments.",
    },
  ]

  return (
    <Drawer open={open} onOpenChange={onOpenChange}>
      <DrawerContent className="rounded-t-[32px] max-h-[90vh]">
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle className="text-2xl font-bold text-center flex items-center justify-center gap-2">
              <Truck className="h-6 w-6 text-purple-600" />
              Delivery Made Easy
            </DrawerTitle>
            <DrawerDescription className="text-center">
              Find trusted delivery partners and manage your shipments seamlessly.
            </DrawerDescription>
          </DrawerHeader>
          
          <ScrollArea className="h-[45vh] px-4">
            <div className="space-y-5 py-4">
              {tips.map((tip, index) => (
                <div key={index} className="flex gap-4 items-start">
                  <div className="mt-1 bg-gray-100 p-2 rounded-full flex-shrink-0">
                    {tip.icon}
                  </div>
                  <div className="space-y-1">
                    <h4 className="font-semibold text-gray-900 text-sm">{tip.title}</h4>
                    <p className="text-sm text-gray-500 leading-relaxed whitespace-pre-line">
                      {tip.description}
                    </p>
                  </div>
                </div>
              ))}

              {/* Invite Delivery Men Section */}
              <div className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl p-4 border border-purple-100">
                <div className="flex items-center gap-2 mb-3">
                  <BadgeCheck className="h-5 w-5 text-purple-600" />
                  <h4 className="font-semibold text-purple-900 text-sm">Invite Delivery Men to Register</h4>
                </div>
                <p className="text-xs text-purple-700 mb-3">
                  Share this link with local delivery men so they can create a profile and get discovered by sellers on Affiliate+.
                </p>
                <div className="flex gap-2">
                  <div className="flex-1 relative">
                    <Input
                      readOnly
                      value={registrationLink}
                      className="bg-white text-xs pr-8 h-9 border-purple-200 focus:border-purple-400"
                    />
                  </div>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={handleCopy}
                    className="h-9 border-purple-200 hover:bg-purple-50 shrink-0"
                  >
                    {copied ? <Check className="h-3.5 w-3.5 text-green-600" /> : <Copy className="h-3.5 w-3.5" />}
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={handleShare}
                    className="h-9 border-purple-200 hover:bg-purple-50 shrink-0"
                  >
                    <Share2 className="h-3.5 w-3.5" />
                  </Button>
                </div>
              </div>
            </div>
          </ScrollArea>

          <DrawerFooter className="pt-4 pb-8 flex flex-col gap-2">
            <DrawerClose asChild>
              <Button className="w-full h-12 rounded-xl text-lg bg-purple-600 hover:bg-purple-700">
                Got It, Thanks!
              </Button>
            </DrawerClose>
            <DrawerClose asChild>
              <Button variant="outline" className="w-full" asChild>
                <a href="/delivery-men" className="flex items-center justify-center gap-2">
                  <Users className="h-4 w-4" />
                  Browse Delivery Men Now
                </a>
              </Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}