veza/apps/web/src/components/developer/APIPlaygroundView.tsx

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 '../../components/feedback/ToastProvider';

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-foreground 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-foreground mb-4">Request</h3>

            <div className="space-y-4">
              <div>
                <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
                  Endpoint
                </label>
                <select
                  className="w-full bg-card border border-border rounded p-4 text-foreground focus:border-border 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-muted-foreground mt-1">
                  {selectedEndpoint.desc}
                </p>
              </div>

              <div>
                <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
                  Body (JSON)
                </label>
                <textarea
                  className="w-full bg-card border border-border rounded p-4 text-foreground focus:border-border 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="glass" className="h-full flex flex-col">
            <div className="flex justify-between items-center mb-4">
              <h3 className="font-bold text-foreground">Response</h3>
              {response && (
                <div className="flex gap-2">
                  <span className="text-xs font-bold text-success bg-success/10 px-2 py-1 rounded">
                    200 OK
                  </span>
                  <span className="text-xs font-bold text-muted-foreground bg-white/10 px-2 py-1 rounded">
                    45ms
                  </span>
                </div>
              )}
            </div>

            <div className="flex-1 bg-black/30 rounded border border-border/50 p-4 relative group">
              {response ? (
                <>
                  <pre className="text-xs text-success font-mono whitespace-pre-wrap overflow-auto h-full max-h-layout-drawer">
                    {response}
                  </pre>
                  <button
                    className="absolute top-2 right-2 p-2 bg-muted rounded text-muted-foreground hover:text-foreground 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-muted-foreground">
                  <p className="text-sm">Waiting for request...</p>
                </div>
              )}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};