import React, { useState } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Play, RotateCcw, Copy } from 'lucide-react';
import { useToast } from '../../context/ToastContext';

const ENDPOINTS = [
    { method: 'GET', path: '/v1/user/profile', desc: 'Get current user profile' },
    { method: 'GET', path: '/v1/tracks', desc: 'List tracks' },
    { method: 'POST', path: '/v1/tracks/upload', desc: 'Upload a new track' },
    { method: 'GET', path: '/v1/sales/history', desc: 'Get sales history' },
];

export const APIPlaygroundView: React.FC = () => {
  const { addToast } = useToast();
  const [selectedEndpoint, setSelectedEndpoint] = useState(ENDPOINTS[0]);
  const [params, setParams] = useState('{\n  "limit": 10,\n  "offset": 0\n}');
  const [response, setResponse] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const handleSend = () => {
      setLoading(true);
      setResponse(null);
      
      // Simulate network request
      setTimeout(() => {
          setLoading(false);
          setResponse(JSON.stringify({
              status: 200,
              data: {
                  message: "Success",
                  timestamp: new Date().toISOString(),
                  result: [
                      { id: 1, name: "Sample Item" },
                      { id: 2, name: "Another Item" }
                  ]
              }
          }, null, 2));
          addToast("Request successful", "success");
      }, 800);
  };

  return (
    <div className="space-y-6 animate-fadeIn pb-20">
        <h2 className="text-2xl font-bold text-white mb-6">API PLAYGROUND</h2>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            
            {/* Request Builder */}
            <div className="space-y-4">
                <Card variant="default">
                    <h3 className="font-bold text-white mb-4">Request</h3>
                    
                    <div className="space-y-4">
                        <div>
                            <label className="block text-xs font-bold text-gray-400 uppercase mb-2">Endpoint</label>
                            <select 
                                className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-cyan outline-none font-mono text-sm"
                                value={selectedEndpoint.path}
                                onChange={(e) => {
                                    const ep = ENDPOINTS.find(p => p.path === e.target.value);
                                    if(ep) setSelectedEndpoint(ep);
                                }}
                            >
                                {ENDPOINTS.map(ep => (
                                    <option key={ep.path} value={ep.path}>{ep.method} {ep.path}</option>
                                ))}
                            </select>
                            <p className="text-xs text-gray-500 mt-1">{selectedEndpoint.desc}</p>
                        </div>

                        <div>
                            <label className="block text-xs font-bold text-gray-400 uppercase mb-2">Body (JSON)</label>
                            <textarea 
                                className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-cyan outline-none font-mono text-xs h-48 resize-none"
                                value={params}
                                onChange={(e) => setParams(e.target.value)}
                            />
                        </div>

                        <div className="flex justify-end gap-2">
                            <Button variant="ghost" onClick={() => setParams('{}')} icon={<RotateCcw className="w-4 h-4" />}>Reset</Button>
                            <Button variant="primary" onClick={handleSend} disabled={loading} icon={<Play className="w-4 h-4 fill-current" />}>
                                {loading ? 'Sending...' : 'Send Request'}
                            </Button>
                        </div>
                    </div>
                </Card>
            </div>

            {/* Response Viewer */}
            <div className="space-y-4 h-full">
                <Card variant="gaming" className="h-full flex flex-col">
                    <div className="flex justify-between items-center mb-4">
                        <h3 className="font-bold text-white">Response</h3>
                        {response && (
                            <div className="flex gap-2">
                                <span className="text-xs font-bold text-kodo-lime bg-kodo-lime/10 px-2 py-1 rounded">200 OK</span>
                                <span className="text-xs font-bold text-gray-400 bg-white/10 px-2 py-1 rounded">45ms</span>
                            </div>
                        )}
                    </div>
                    
                    <div className="flex-1 bg-black/30 rounded border border-kodo-steel/50 p-4 relative group">
                        {response ? (
                            <>
                                <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap overflow-auto h-full max-h-[500px]">
                                    {response}
                                </pre>
                                <button 
                                    className="absolute top-2 right-2 p-2 bg-gray-800 rounded text-gray-400 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
                                    onClick={() => { navigator.clipboard.writeText(response); addToast("Copied JSON"); }}
                                >
                                    <Copy className="w-4 h-4" />
                                </button>
                            </>
                        ) : (
                            <div className="flex flex-col items-center justify-center h-full text-gray-500">
                                <p className="text-sm">Waiting for request...</p>
                            </div>
                        )}
                    </div>
                </Card>
            </div>
        </div>
    </div>
  );
};