'use client'

import React, { useState, useEffect, useCallback } from 'react'
import { API, ISMSPolicy } from '../_types'
import { EmptyState, LoadingSpinner, StatusBadge } from './shared'

// =============================================================================
// TAB: POLICIES
// =============================================================================

export function PoliciesTab() {
  const [policies, setPolicies] = useState<ISMSPolicy[]>([])
  const [loading, setLoading] = useState(true)
  const [showCreate, setShowCreate] = useState(false)
  const [filter, setFilter] = useState<string>('')

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const url = filter ? `${API}/policies?policy_type=${filter}` : `${API}/policies`
      const res = await fetch(url)
      if (res.ok) {
        const data = await res.json()
        setPolicies(data.policies || [])
      }
    } catch { /* ignore */ }
    setLoading(false)
  }, [filter])

  useEffect(() => { load() }, [load])

  const createPolicy = async (form: Record<string, unknown>) => {
    try {
      const res = await fetch(`${API}/policies`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      if (res.ok) { setShowCreate(false); load() }
    } catch { /* ignore */ }
  }

  const approvePolicy = async (policyId: string) => {
    try {
      await fetch(`${API}/policies/${policyId}/approve`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          reviewed_by: 'admin',
          approved_by: 'admin',
          effective_date: new Date().toISOString().split('T')[0],
        }),
      })
      load()
    } catch { /* ignore */ }
  }

  if (loading) return <LoadingSpinner />

  const policyTypes = ['master', 'topic', 'operational', 'standard']

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex gap-2">
          <button onClick={() => setFilter('')} className={`px-3 py-1.5 rounded-lg text-sm ${!filter ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>Alle</button>
          {policyTypes.map(t => (
            <button key={t} onClick={() => setFilter(t)} className={`px-3 py-1.5 rounded-lg text-sm capitalize ${filter === t ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>{t}</button>
          ))}
        </div>
        <button onClick={() => setShowCreate(true)} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm">Neue Policy</button>
      </div>

      {policies.length === 0 ? (
        <EmptyState text="Keine Policies vorhanden" action="Policy erstellen" onAction={() => setShowCreate(true)} />
      ) : (
        <div className="space-y-3">
          {policies.map(p => (
            <div key={p.id} className="bg-white border rounded-xl p-4">
              <div className="flex items-center justify-between">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-xs text-gray-500">{p.policy_id}</span>
                    <span className="text-sm font-medium text-gray-900">{p.title}</span>
                    <StatusBadge status={p.status} />
                    <span className="text-xs text-gray-400">v{p.version}</span>
                  </div>
                  <p className="text-xs text-gray-600 mt-1 line-clamp-2">{p.description}</p>
                  <div className="flex gap-3 mt-1 text-xs text-gray-500">
                    <span>Typ: {p.policy_type}</span>
                    <span>Review: alle {p.review_frequency_months} Monate</span>
                    {p.next_review_date && <span>Naechste Review: {new Date(p.next_review_date).toLocaleDateString('de-DE')}</span>}
                  </div>
                </div>
                {p.status === 'draft' && (
                  <button onClick={() => approvePolicy(p.id)} className="px-3 py-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-xs">Genehmigen</button>
                )}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Create Modal */}
      {showCreate && (
        <PolicyCreateModal onClose={() => setShowCreate(false)} onSave={createPolicy} />
      )}
    </div>
  )
}

function PolicyCreateModal({ onClose, onSave }: { onClose: () => void; onSave: (data: Record<string, unknown>) => void }) {
  const [form, setForm] = useState({
    policy_id: '', title: '', policy_type: 'topic', description: '', policy_text: '',
    applies_to: ['Alle Mitarbeiter'], review_frequency_months: 12, related_controls: [] as string[],
    authored_by: 'admin',
  })

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6">
        <h3 className="text-lg font-semibold mb-4">Neue ISMS Policy</h3>
        <div className="space-y-3">
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs font-medium text-gray-600">Policy-ID</label>
              <input value={form.policy_id} onChange={e => setForm({ ...form, policy_id: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" placeholder="z.B. POL-SEC-001" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Typ</label>
              <select value={form.policy_type} onChange={e => setForm({ ...form, policy_type: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm">
                <option value="master">Master Policy</option>
                <option value="topic">Topic Policy</option>
                <option value="operational">Operational</option>
                <option value="standard">Standard</option>
              </select>
            </div>
          </div>
          <div>
            <label className="text-xs font-medium text-gray-600">Titel</label>
            <input value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
          </div>
          <div>
            <label className="text-xs font-medium text-gray-600">Beschreibung</label>
            <textarea value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" rows={2} />
          </div>
          <div>
            <label className="text-xs font-medium text-gray-600">Policy-Text</label>
            <textarea value={form.policy_text} onChange={e => setForm({ ...form, policy_text: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" rows={5} />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs font-medium text-gray-600">Review-Frequenz (Monate)</label>
              <input type="number" value={form.review_frequency_months} onChange={e => setForm({ ...form, review_frequency_months: Number(e.target.value) })} className="w-full border rounded-lg px-3 py-2 text-sm" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Autor</label>
              <input value={form.authored_by} onChange={e => setForm({ ...form, authored_by: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
            </div>
          </div>
        </div>
        <div className="flex justify-end gap-2 mt-6">
          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
          <button onClick={() => onSave(form)} className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700">Erstellen</button>
        </div>
      </div>
    </div>
  )
}