"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Shield, ShieldAlert, ShieldX } from "lucide-react"

interface User {
  national_id: string
  name: string
  in_shelter?: string
  last_updated?: string
}

interface ReportOnBehalfModalProps {
  isOpen: boolean
  onClose: () => void
  user: User | null
  onReport: (userId: string, status: string) => void
}

export function ReportOnBehalfModal({ isOpen, onClose, user, onReport }: ReportOnBehalfModalProps) {
  const [loading, setLoading] = useState(false)

  if (!user) return null

  const handleReport = async (status: string) => {
    setLoading(true)
    try {
      await onReport(user.national_id, status)
      onClose()
    } catch (error) {
      console.error("Error reporting:", error)
    } finally {
      setLoading(false)
    }
  }

  const getStatusText = (status?: string) => {
    switch (status) {
      case "yes":
        return "במקלט/חדר מוגן"
      case "no":
        return "לא במקלט"
      case "no_alarm":
        return "אין אזעקה"
        case "safe_after_exit":
        return "אני בטוח.ה (סוף אירוע)"
      default:
        return "אין דיווח"
    }
  }

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-md" dir="rtl">
        <DialogHeader className="text-center" dir="rtl">
          <DialogTitle className="text-center" dir="rtl" >דיווח עבור {user.name}</DialogTitle>
          <DialogDescription className="text-center" dir="rtl">בחר סטטוס לדיווח עבור המשתמש</DialogDescription>
        </DialogHeader>

        <div className="space-y-4 text-center" dir="rtl">
          {user.in_shelter && (
            <div className="bg-blue-50 p-3 rounded">
              <p className="text-sm text-gray-600">סטטוס נוכחי:</p>
              <p className="font-semibold text-blue-600">{getStatusText(user.in_shelter)}</p>
              {user.last_updated && (
                <p className="text-xs text-gray-500">עודכן: {new Date(user.last_updated).toLocaleString("he-IL")}</p>
              )}
            </div>
          )}

          <div className="space-y-3">
            <Button
              variant="outline"
              className="w-full h-16 text-lg border-green-200 hover:bg-green-50"
              onClick={() => handleReport("no_alarm")}
              disabled={loading}
            >
              <ShieldAlert className="ml-2 h-6 w-6 text-green-600" />
              אין אזעקה באזור
            </Button>

            <Button
              variant="outline"
              className="w-full h-20 text-xl border-green-200 hover:bg-green-50"
              onClick={() => handleReport("yes")}
              disabled={loading}
            >
              <Shield className="ml-2 h-8 w-8 text-green-600" />
              במקלט/חדר מוגן
            </Button>

            <Button
              variant="outline"
              className="w-full h-16 text-lg border-emerald-200 hover:bg-emerald-50"
              onClick={() => handleReport("safe_after_exit")}
              disabled={loading}
            >
              <Shield className="ml-2 h-6 w-6 text-emerald-600" />
              בטוח אחרי יציאה מהמקלט
            </Button>

            <Button
              variant="outline"
              className="w-full h-16 text-lg border-orange-200 hover:bg-orange-50"
              onClick={() => handleReport("no")}
              disabled={loading}
            >
              <ShieldX className="ml-2 h-6 w-6 text-orange-600" />
              לא במקלט - אין מקלט בקרבת מקום
            </Button>
          </div>

          <Button variant="outline" onClick={onClose} className="w-full">
            ביטול
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}