'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import {
  Database,
  RefreshCw,
  Save,
  AlertCircle,
  CheckCircle,
} from 'lucide-react';
import { useSandbox } from './sandbox-context';

export function MockDataEditor() {
  const { mockData, setMockData, resetMockData } = useSandbox();
  const [editedJson, setEditedJson] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    setEditedJson(JSON.stringify(mockData, null, 2));
  }, [mockData]);

  const handleSave = () => {
    try {
      const parsed = JSON.parse(editedJson);
      // Update each key in mock data
      Object.entries(parsed).forEach(([key, value]) => {
        setMockData(key, value);
      });
      setError(null);
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    } catch (e) {
      setError('Invalid JSON syntax');
    }
  };

  const handleReset = () => {
    resetMockData();
    setError(null);
  };

  return (
    <div className="h-full flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-white/10">
        <h3 className="font-semibold text-white flex items-center gap-2">
          <Database className="w-5 h-5 text-brand-secondary-light" />
          Mock Data
        </h3>
        <div className="flex items-center gap-2">
          <button
            onClick={handleReset}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-colors text-sm"
          >
            <RefreshCw className="w-4 h-4" />
            Reset
          </button>
          <button
            onClick={handleSave}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-brand-secondary/20 hover:bg-brand-secondary/30 text-brand-secondary-light transition-colors text-sm"
          >
            {saved ? (
              <><CheckCircle className="w-4 h-4 text-green-400" /> Saved!</>
            ) : (
              <><Save className="w-4 h-4" /> Save</>
            )}
          </button>
        </div>
      </div>

      {/* Error */}
      {error && (
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className="mx-4 mt-4 p-3 rounded-lg bg-red-500/10 border border-red-500/30 flex items-center gap-2 text-red-400 text-sm"
        >
          <AlertCircle className="w-4 h-4" />
          {error}
        </motion.div>
      )}

      {/* Editor */}
      <div className="flex-1 p-4">
        <textarea
          value={editedJson}
          onChange={(e) => {
            setEditedJson(e.target.value);
            setError(null);
          }}
          className="w-full h-full p-4 rounded-xl bg-gray-900 border border-white/10 text-gray-300 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-brand-secondary/50 focus:border-brand-secondary/50"
          spellCheck={false}
        />
      </div>
    </div>
  );
}
