'use client'

import React, { useState } from 'react'
import { useAgentAnalysis } from './_hooks/useAgentAnalysis'
import { AnalysisResult } from './_components/AnalysisResult'
import { AnalysisHistory } from './_components/AnalysisHistory'
import { FollowUpQuestions } from './_components/FollowUpQuestions'

type AnalysisMode = 'pre_launch' | 'post_launch'

const MODES: { id: AnalysisMode; label: string; desc: string; icon: string }[] = [
  {
    id: 'pre_launch',
    label: 'Internes Dokument pruefen',
    desc: 'Dokument oder Website VOR Veroeffentlichung pruefen',
    icon: '📋',
  },
  {
    id: 'post_launch',
    label: 'Live-Website pruefen',
    desc: 'Bereits veroeffentlichte Website oder Dokument analysieren',
    icon: '🌐',
  },
]

export default function AgentPage() {
  const [url, setUrl] = useState('')
  const [mode, setMode] = useState<AnalysisMode>('post_launch')
  const { analyze, answerFollowUp, loading, error, result, history } = useAgentAnalysis()

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!url.trim()) return
    analyze(url.trim(), mode)
  }

  return (
    <div className="space-y-6 max-w-4xl">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Compliance Agent</h1>
        <p className="text-gray-500 mt-1">
          Analysiere Dokumente und Webseiten auf DSGVO-Konformitaet.
        </p>
      </div>

      {/* Mode Selection */}
      <div className="grid grid-cols-2 gap-3">
        {MODES.map(m => (
          <button
            key={m.id}
            onClick={() => setMode(m.id)}
            className={`p-4 rounded-xl border-2 text-left transition-all ${
              mode === m.id
                ? 'border-purple-500 bg-purple-50 shadow-sm'
                : 'border-gray-200 bg-white hover:border-gray-300'
            }`}
          >
            <div className="flex items-center gap-3">
              <span className="text-2xl">{m.icon}</span>
              <div>
                <p className={`text-sm font-semibold ${mode === m.id ? 'text-purple-900' : 'text-gray-900'}`}>
                  {m.label}
                </p>
                <p className="text-xs text-gray-500 mt-0.5">{m.desc}</p>
              </div>
            </div>
          </button>
        ))}
      </div>

      {/* URL Input */}
      <form onSubmit={handleSubmit} className="flex gap-3">
        <input
          type="url"
          value={url}
          onChange={e => setUrl(e.target.value)}
          placeholder={mode === 'pre_launch'
            ? 'https://staging.example.com/datenschutz'
            : 'https://www.example.com/datenschutz'}
          className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
          disabled={loading}
          required
        />
        <button
          type="submit"
          disabled={loading || !url.trim()}
          className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2 text-sm font-medium"
        >
          {loading ? (
            <>
              <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
              </svg>
              Analysiere...
            </>
          ) : (
            'Analysieren'
          )}
        </button>
      </form>

      {/* Error */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">
          {error}
        </div>
      )}

      {/* Result */}
      {result && (
        <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm space-y-6">
          <AnalysisResult result={result} />

          {/* Follow-Up Questions */}
          {result.follow_up_questions.length > 0 && (
            <div className="border-t pt-4">
              <FollowUpQuestions
                questions={result.follow_up_questions}
                answers={result.follow_up_answers}
                onAnswer={answerFollowUp}
              />
            </div>
          )}
        </div>
      )}

      {/* History */}
      <AnalysisHistory
        history={history}
        onSelect={r => {
          setUrl(r.url)
          analyze(r.url, mode)
        }}
      />
    </div>
  )
}