import { useState } from 'react';
import { Card } from '../common/Card';
import { Button } from '../common/Button';
import { Input } from '../common/Input';
import { Download, Plus, Trash2, MoveUp, MoveDown } from 'lucide-react';

interface ReportSection {
  id: string;
  type: 'text' | 'chart' | 'table' | 'image';
  title: string;
  content: string;
}

export const ReportBuilder = () => {
  const [sections, setSections] = useState<ReportSection[]>([
    { id: '1', type: 'text', title: 'Executive Summary', content: 'The optimization study successfully converged...' },
    { id: '2', type: 'chart', title: 'Convergence Plot', content: 'convergence_plot' },
    { id: '3', type: 'table', title: 'Top 10 Designs', content: 'top_designs_table' },
  ]);

  const addSection = (type: ReportSection['type']) => {
    setSections([
      ...sections,
      { id: Date.now().toString(), type, title: 'New Section', content: '' }
    ]);
  };

  const removeSection = (id: string) => {
    setSections(sections.filter(s => s.id !== id));
  };

  const moveSection = (index: number, direction: 'up' | 'down') => {
    if (direction === 'up' && index === 0) return;
    if (direction === 'down' && index === sections.length - 1) return;
    
    const newSections = [...sections];
    const targetIndex = direction === 'up' ? index - 1 : index + 1;
    [newSections[index], newSections[targetIndex]] = [newSections[targetIndex], newSections[index]];
    setSections(newSections);
  };

  const updateSection = (id: string, field: keyof ReportSection, value: string) => {
    setSections(sections.map(s => s.id === id ? { ...s, [field]: value } : s));
  };

  return (
    <div className="grid grid-cols-12 gap-6 h-full">
      {/* Editor Sidebar */}
      <div className="col-span-4 flex flex-col gap-4">
        <Card title="Report Structure" className="flex-1 flex flex-col">
          <div className="flex-1 overflow-y-auto space-y-3 pr-2">
            {sections.map((section, index) => (
              <div key={section.id} className="bg-dark-900/50 p-3 rounded-lg border border-dark-700 group">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-xs font-medium text-primary-400 uppercase">{section.type}</span>
                  <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    <button onClick={() => moveSection(index, 'up')} className="p-1 hover:bg-dark-700 rounded"><MoveUp className="w-3 h-3" /></button>
                    <button onClick={() => moveSection(index, 'down')} className="p-1 hover:bg-dark-700 rounded"><MoveDown className="w-3 h-3" /></button>
                    <button onClick={() => removeSection(section.id)} className="p-1 hover:bg-red-900/50 text-red-400 rounded"><Trash2 className="w-3 h-3" /></button>
                  </div>
                </div>
                <Input 
                  value={section.title} 
                  onChange={(e) => updateSection(section.id, 'title', e.target.value)}
                  className="mb-2 text-sm"
                />
                {section.type === 'text' && (
                  <textarea 
                    className="w-full bg-dark-800 border border-dark-600 rounded-md p-2 text-xs text-dark-100 focus:outline-none focus:border-primary-500 resize-none h-20"
                    value={section.content}
                    onChange={(e) => updateSection(section.id, 'content', e.target.value)}
                    placeholder="Enter content..."
                  />
                )}
              </div>
            ))}
          </div>
          
          <div className="mt-4 pt-4 border-t border-dark-600 grid grid-cols-2 gap-2">
            <Button size="sm" variant="secondary" onClick={() => addSection('text')} icon={<Plus className="w-3 h-3" />}>Text</Button>
            <Button size="sm" variant="secondary" onClick={() => addSection('chart')} icon={<Plus className="w-3 h-3" />}>Chart</Button>
            <Button size="sm" variant="secondary" onClick={() => addSection('table')} icon={<Plus className="w-3 h-3" />}>Table</Button>
            <Button size="sm" variant="secondary" onClick={() => addSection('image')} icon={<Plus className="w-3 h-3" />}>Image</Button>
          </div>
        </Card>
      </div>

      {/* Preview Area */}
      <div className="col-span-8 flex flex-col gap-4">
        <Card className="flex-1 flex flex-col bg-white text-black overflow-hidden">
          <div className="flex items-center justify-between border-b border-gray-200 pb-4 mb-6">
            <h2 className="text-2xl font-bold text-gray-900">Optimization Report Preview</h2>
            <Button size="sm" icon={<Download className="w-4 h-4" />}>Export PDF</Button>
          </div>
          
          <div className="flex-1 overflow-y-auto pr-4 space-y-8">
            {sections.map(section => (
              <div key={section.id}>
                <h3 className="text-xl font-semibold text-gray-800 mb-3">{section.title}</h3>
                {section.type === 'text' && (
                  <p className="text-gray-600 leading-relaxed">{section.content}</p>
                )}
                {section.type === 'chart' && (
                  <div className="h-64 bg-gray-100 rounded-lg flex items-center justify-center border border-gray-200 border-dashed">
                    <span className="text-gray-400 font-medium">[Chart Placeholder: {section.content}]</span>
                  </div>
                )}
                {section.type === 'table' && (
                  <div className="h-32 bg-gray-100 rounded-lg flex items-center justify-center border border-gray-200 border-dashed">
                    <span className="text-gray-400 font-medium">[Table Placeholder: {section.content}]</span>
                  </div>
                )}
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
};