'use client'

import { PublicLayout } from '@/components/layout/public-layout'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { useState } from 'react'
import { Play, Code, Book } from 'lucide-react'

export default function GraphQLExplorerPage() {
  const [query, setQuery] = useState(`query {
  resources {
    id
    name
    type
    status
  }
}`)
  const [variables, setVariables] = useState('{}')
  const [response, setResponse] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)

  const executeQuery = async () => {
    setLoading(true)
    try {
      // In production, this would call the actual GraphQL API
      const res = await fetch('/api/graphql', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query, variables: JSON.parse(variables) }),
      })
      const data = await res.json()
      setResponse(JSON.stringify(data, null, 2))
    } catch (error) {
      setResponse(JSON.stringify({ error: error.message }, null, 2))
    } finally {
      setLoading(false)
    }
  }

  return (
    <PublicLayout>
      <div className="min-h-screen bg-studio-black py-24 px-4">
        <div className="mx-auto max-w-7xl">
          <div className="mb-8">
            <h1 className="mb-4 text-4xl font-bold text-white">GraphQL API Explorer</h1>
            <p className="text-gray-400">
              Interactive GraphQL API explorer with live query execution and schema documentation
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <Card className="bg-studio-dark border-studio-medium">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-2">
                  <Code className="h-5 w-5 text-phoenix-fire" />
                  Query Editor
                </CardTitle>
              </CardHeader>
              <CardContent>
                <textarea
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  className="w-full h-64 p-4 bg-studio-black border border-studio-medium rounded text-white font-mono text-sm"
                  placeholder="Enter your GraphQL query..."
                />
              </CardContent>
            </Card>

            <Card className="bg-studio-dark border-studio-medium">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-2">
                  <Code className="h-5 w-5 text-sankofa-gold" />
                  Variables (JSON)
                </CardTitle>
              </CardHeader>
              <CardContent>
                <textarea
                  value={variables}
                  onChange={(e) => setVariables(e.target.value)}
                  className="w-full h-64 p-4 bg-studio-black border border-studio-medium rounded text-white font-mono text-sm"
                  placeholder='{"key": "value"}'
                />
              </CardContent>
            </Card>
          </div>

          <div className="mb-6">
            <button
              onClick={executeQuery}
              disabled={loading}
              className="px-6 py-3 bg-phoenix-fire text-white rounded-lg hover:bg-phoenix-fire/90 transition-colors disabled:opacity-50 flex items-center gap-2"
            >
              <Play className="h-4 w-4" />
              {loading ? 'Executing...' : 'Execute Query'}
            </button>
          </div>

          {response && (
            <Card className="bg-studio-dark border-studio-medium">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-2">
                  <Book className="h-5 w-5 text-neon-cyan" />
                  Response
                </CardTitle>
              </CardHeader>
              <CardContent>
                <pre className="p-4 bg-studio-black border border-studio-medium rounded text-white font-mono text-sm overflow-auto">
                  {response}
                </pre>
              </CardContent>
            </Card>
          )}

          <Card className="mt-6 bg-studio-dark border-studio-medium">
            <CardHeader>
              <CardTitle className="text-white">Schema Documentation</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-300 mb-4">
                Explore the GraphQL schema to discover available queries, mutations, and types.
              </p>
              <button className="px-4 py-2 bg-studio-medium text-white rounded hover:bg-studio-medium/80 transition-colors">
                View Schema Documentation →
              </button>
            </CardContent>
          </Card>
        </div>
      </div>
    </PublicLayout>
  )
}

