'use client'

import { useState } from 'react'

type RiskFlag = {
  zone: string
  site: string
  risk_level: 'low' | 'medium' | 'high'
  rationale: string
  recommended_action: string
}

const LEVEL_COLORS: Record<RiskFlag['risk_level'], string> = {
  low: 'bg-yellow-50 text-yellow-700 border-yellow-200',
  medium: 'bg-orange-50 text-orange-700 border-orange-200',
  high: 'bg-red-50 text-red-700 border-red-200',
}

export function RiskFlagsPanel() {
  const [flags, setFlags] = useState<RiskFlag[] | null>(null)
  const [summary, setSummary] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const analyze = async () => {
    setLoading(true)
    setError(null)
    try {
      const res = await fetch('/api/dashboard/ai/risk-flags', { method: 'POST' })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        setError(data.error ?? 'Analysis failed')
        return
      }
      const data: { flags: RiskFlag[]; summary: string } = await res.json()
      setFlags(data.flags)
      setSummary(data.summary)
    } catch {
      setError('Analysis failed')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
      <div className="flex items-center justify-between mb-1">
        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">
          Rising-Risk Zones (AI)
        </h2>
        <button
          onClick={analyze}
          disabled={loading}
          className="bg-purple-50 text-purple-700 border border-purple-300 rounded-lg px-3 py-1.5 text-xs font-semibold disabled:opacity-50 hover:bg-purple-100"
        >
          {loading ? 'Analyzing…' : flags ? 'Re-analyze' : 'Analyze 90-Day Risk'}
        </button>
      </div>
      <p className="text-xs text-gray-400 mb-3">
        AI suggestion from 90-day incident aggregates — review before acting.
      </p>

      {error && <p className="text-sm text-red-600">{error}</p>}

      {flags && flags.length === 0 && !error && (
        <p className="text-sm text-gray-500">No zones flagged — no rising-risk pattern detected.</p>
      )}

      {flags && flags.length > 0 && (
        <>
          <p className="text-sm text-gray-700 mb-3">{summary}</p>
          <div className="space-y-2">
            {flags.map(f => (
              <div key={`${f.site}-${f.zone}`} className={`border rounded-lg p-3 ${LEVEL_COLORS[f.risk_level]}`}>
                <div className="flex items-center justify-between mb-1">
                  <span className="text-sm font-semibold">{f.zone} · {f.site}</span>
                  <span className="text-xs font-bold uppercase">{f.risk_level}</span>
                </div>
                <p className="text-sm">{f.rationale}</p>
                <p className="text-xs mt-1"><strong>Recommended:</strong> {f.recommended_action}</p>
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  )
}