import { useState } from 'react';
import { Code2, Play, Terminal, Sparkles } from 'lucide-react';
import { chatApi } from '@/services/api';
import ReactMarkdown from 'react-markdown';
import toast from 'react-hot-toast';

export default function CodePage() {
  const [prompt, setPrompt] = useState('Write a Python function to parse CSV files and compute row counts.');
  const [loading, setLoading] = useState(false);
  const [codeOutput, setCodeOutput] = useState<string | null>(null);

  const handleGenerate = async () => {
    if (!prompt.trim() || loading) return;
    setLoading(true);
    setCodeOutput(null);

    const toastId = toast.loading('Code Agent generating solution...');
    try {
      const res = await chatApi.sendMessage(prompt);
      toast.success('Code generation complete!', { id: toastId });
      setCodeOutput(res.response || 'No code generated.');
    } catch {
      toast.error('Code Agent request failed.', { id: toastId });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="p-6 lg:p-8 space-y-6 max-w-5xl mx-auto animate-fade-in">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-white flex items-center gap-2">
            <Code2 size={24} className="text-purple-400" />
            Code Engineering Agent
          </h2>
          <p className="text-dark-400 text-sm mt-1">
            Generate, refactor, review, and explain code scripts in Python, SQL, TypeScript, and Shell.
          </p>
        </div>
        <span className="text-xs px-2.5 py-1 rounded-full bg-purple-500/10 text-purple-400 border border-purple-500/20 font-semibold uppercase tracking-wider">
          Active Node
        </span>
      </div>

      <div className="glass-card p-6 space-y-4">
        <label className="text-sm font-medium text-dark-200 block">
          Describe the code requirement or algorithm to implement:
        </label>
        <div className="flex gap-3">
          <input
            type="text"
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && handleGenerate()}
            className="input-glow flex-1 px-4 py-3 rounded-xl bg-dark-800 border border-dark-600 text-white placeholder-dark-500 text-sm"
          />
          <button
            onClick={handleGenerate}
            disabled={!prompt.trim() || loading}
            className="flex items-center gap-2 px-5 py-3 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold text-sm hover:from-purple-500 hover:to-indigo-500 active:scale-95 transition-all disabled:opacity-50"
          >
            {loading ? (
              <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
            ) : (
              <Play size={16} />
            )}
            Generate Code
          </button>
        </div>
      </div>

      {codeOutput && (
        <div className="glass-card p-6 space-y-4">
          <h3 className="text-white font-medium text-sm border-b border-dark-700 pb-3 flex items-center gap-2">
            <Terminal size={16} className="text-purple-400" />
            Generated Code & Explanation
          </h3>
          <div className="prose-dark text-sm">
            <ReactMarkdown>{codeOutput}</ReactMarkdown>
          </div>
        </div>
      )}
    </div>
  );
}