"use client"

import { useState } from "react"
import { MapPin, Share, Clock } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"

interface User {
  id: string
  firstName: string
  lastName: string
  avatar?: string
}

interface LocationShareProps {
  users: User[]
  currentLocation?: {
    latitude: number
    longitude: number
    accuracy: number
  }
  onShare: (userIds: string[], duration: string) => void
}

export function LocationShare({ users, currentLocation, onShare }: LocationShareProps) {
  const [selectedUsers, setSelectedUsers] = useState<string[]>([])
  const [duration, setDuration] = useState("1hour")

  const toggleUser = (userId: string) => {
    setSelectedUsers((prev) => (prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId]))
  }

  const handleShare = () => {
    if (selectedUsers.length > 0) {
      onShare(selectedUsers, duration)
      setSelectedUsers([])
    }
  }

  const getDurationLabel = (value: string) => {
    switch (value) {
      case "15min":
        return "15 minutes"
      case "1hour":
        return "1 hour"
      case "8hours":
        return "8 hours"
      case "24hours":
        return "24 hours"
      case "until_stopped":
        return "Until stopped"
      default:
        return "1 hour"
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center space-x-2">
          <Share className="h-5 w-5" />
          <span>Share Location</span>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {!currentLocation ? (
          <div className="text-center py-6">
            <MapPin className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
            <p className="text-muted-foreground">Location not available</p>
            <p className="text-sm text-muted-foreground">Enable location services to share your location</p>
          </div>
        ) : (
          <>
            <div className="space-y-2">
              <p className="font-medium">Share Duration</p>
              <Select value={duration} onValueChange={setDuration}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="15min">15 minutes</SelectItem>
                  <SelectItem value="1hour">1 hour</SelectItem>
                  <SelectItem value="8hours">8 hours</SelectItem>
                  <SelectItem value="24hours">24 hours</SelectItem>
                  <SelectItem value="until_stopped">Until stopped</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <p className="font-medium">Select Recipients</p>
                {selectedUsers.length > 0 && <Badge variant="secondary">{selectedUsers.length} selected</Badge>}
              </div>

              <div className="space-y-2 max-h-60 overflow-y-auto">
                {users.map((user) => (
                  <div
                    key={user.id}
                    className={`flex items-center space-x-3 p-3 rounded-lg border cursor-pointer transition-colors ${
                      selectedUsers.includes(user.id) ? "bg-primary/10 border-primary" : "hover:bg-accent"
                    }`}
                    onClick={() => toggleUser(user.id)}
                  >
                    <Avatar className="h-10 w-10">
                      <AvatarImage src={user.avatar || "/placeholder.svg"} alt={`${user.firstName} ${user.lastName}`} />
                      <AvatarFallback>
                        {user.firstName[0]}
                        {user.lastName[0]}
                      </AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <p className="font-medium">
                        {user.firstName} {user.lastName}
                      </p>
                    </div>
                    {selectedUsers.includes(user.id) && (
                      <div className="h-4 w-4 bg-primary rounded-full flex items-center justify-center">
                        <div className="h-2 w-2 bg-primary-foreground rounded-full" />
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>

            {selectedUsers.length > 0 && (
              <div className="pt-4 border-t">
                <div className="flex items-center space-x-2 text-sm text-muted-foreground mb-3">
                  <Clock className="h-4 w-4" />
                  <span>Location will be shared for {getDurationLabel(duration)}</span>
                </div>
                <Button onClick={handleShare} className="w-full">
                  <Share className="h-4 w-4 mr-2" />
                  Share Location with {selectedUsers.length} {selectedUsers.length === 1 ? "person" : "people"}
                </Button>
              </div>
            )}
          </>
        )}
      </CardContent>
    </Card>
  )
}