// app/components/admin/CommonComponents/JsonSchemaManager.tsx
'use client';

import { useState } from 'react';
import toast from 'react-hot-toast';

interface JsonSchemaManagerProps {
  schemas: unknown[];
  onChange: (schemas: unknown[]) => void;
  placeholder?: string;
  className?: string;
}

export default function JsonSchemaManager({
  schemas,
  onChange,
  placeholder = '{"@context": "https://schema.org", "@type": "WebPage"}',
  className = '',
}: JsonSchemaManagerProps) {
  const [input, setInput] = useState('');

  const handleAdd = () => {
    if (!input.trim()) return;

    try {
      const parsed = JSON.parse(input);
      onChange([...schemas, parsed]);
      setInput('');
      toast.success('Schema added successfully');
    } catch {
      toast.error('Invalid JSON — please check your syntax');
    }
  };

  const handleRemove = (index: number) => {
    onChange(schemas.filter((_, i) => i !== index));
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
      e.preventDefault();
      handleAdd();
    }
  };

  return (
    <div className={`space-y-4 ${className}`}>
      <div className="flex gap-4">
        <textarea
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
          rows={3}
          className="flex-1 px-3 py-2 border border-var-border rounded-xl focus:ring-2 focus:ring-var-primary focus:border-var-primary bg-var-input text-var-text placeholder-var-text-muted transition-colors duration-200 font-mono text-sm"
        />
        <button
          type="button"
          onClick={handleAdd}
          className="px-4 py-2 text-sm font-medium text-white bg-var-primary rounded-xl hover:bg-var-primary-hover transition-colors duration-200 self-start"
          title="Add schema (Ctrl+Enter)"
        >
          Add Schema
        </button>
      </div>

      {schemas.length > 0 && (
        <div className="border border-var-border rounded-xl overflow-hidden">
          <div className="bg-var-surface-hover px-4 py-3 border-b border-var-border flex items-center justify-between">
            <h4 className="text-sm font-medium text-var-text">
              Added Schemas ({schemas.length})
            </h4>
            <span className="text-xs text-var-text-muted">Ctrl+Enter to add</span>
          </div>

          <div className="divide-y divide-var-border">
            {schemas.map((schema, index) => (
              <div key={index} className="px-4 py-3 flex items-start justify-between gap-4">
                <pre className="font-mono text-xs text-var-text whitespace-pre-wrap break-all flex-1 min-w-0">
                  {JSON.stringify(schema, null, 2)}
                </pre>
                <button
                  type="button"
                  onClick={() => handleRemove(index)}
                  className="text-var-danger hover:text-var-danger/80 transition-colors duration-200 p-1 shrink-0"
                  title="Remove schema"
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                </button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}