'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'

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

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

  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 Webseiten auf DSGVO-Konformitaet. Der Agent holt das Dokument,
          klassifiziert es, bewertet das Risiko und weist die Aufgabe der zustaendigen Rolle zu.
        </p>
      </div>

      {/* URL Input */}
      <form onSubmit={handleSubmit} className="flex gap-3">
        <input
          type="url"
          value={url}
          onChange={e => setUrl(e.target.value)}
          placeholder="https://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)
        }}
      />
    </div>
  )
}