'use client';

import { useState } from 'react';
import { Save, Plus, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import type { GuionConductor, ActoGuion, SegmentoGuion } from '@/types/project';

interface GuionFieldsEditorProps {
  guion: GuionConductor;
  onSave: (guion: GuionConductor) => Promise<void>;
  onCancel: () => void;
}

export function GuionFieldsEditor({ guion, onSave, onCancel }: GuionFieldsEditorProps) {
  const [edited, setEdited] = useState<GuionConductor>(JSON.parse(JSON.stringify(guion)));
  const [saving, setSaving] = useState(false);
  const [expandedActo, setExpandedActo] = useState<number | null>(0);

  const updateField = (field: keyof GuionConductor, value: any) => {
    setEdited({ ...edited, [field]: value });
  };

  const updateAliado = (field: 'nombre' | 'descripcion', value: string) => {
    setEdited({
      ...edited,
      aliado: { ...edited.aliado, [field]: value },
    });
  };

  const updateActo = (actoIdx: number, field: keyof ActoGuion, value: any) => {
    const actos = [...(edited.actos || [])];
    actos[actoIdx] = { ...actos[actoIdx], [field]: value };
    setEdited({ ...edited, actos });
  };

  const updateSegmento = (actoIdx: number, segIdx: number, field: keyof SegmentoGuion, value: string) => {
    const actos = [...(edited.actos || [])];
    const segmentos = [...actos[actoIdx].segmentos];
    segmentos[segIdx] = { ...segmentos[segIdx], [field]: value };
    actos[actoIdx] = { ...actos[actoIdx], segmentos };
    setEdited({ ...edited, actos });
  };

  const addSegmento = (actoIdx: number) => {
    const actos = [...(edited.actos || [])];
    const acto = actos[actoIdx];
    const nextId = `${acto.numero === 1 ? 'I' : acto.numero === 2 ? 'II' : 'III'}.${acto.segmentos.length + 1}`;
    acto.segmentos = [
      ...acto.segmentos,
      { id: nextId, nombre: '', tiempo: '', accionVisualClave: '', disenoFondo: '', disenoSonido: '' },
    ];
    setEdited({ ...edited, actos });
  };

  const removeSegmento = (actoIdx: number, segIdx: number) => {
    const actos = [...(edited.actos || [])];
    actos[actoIdx] = {
      ...actos[actoIdx],
      segmentos: actos[actoIdx].segmentos.filter((_, i) => i !== segIdx),
    };
    setEdited({ ...edited, actos });
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      await onSave(edited);
    } finally {
      setSaving(false);
    }
  };

  const inputClass = "w-full px-2.5 py-1.5 text-sm border border-stone-200 rounded-lg bg-white text-stone-900 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400 transition-colors";
  const labelClass = "block text-xs font-medium text-stone-500 mb-1";

  return (
    <div className="space-y-5">
      {/* Metadata fields */}
      <div className="grid grid-cols-2 gap-4">
        <div className="col-span-2">
          <label className={labelClass}>Título</label>
          <input
            type="text"
            value={edited.titulo || ''}
            onChange={(e) => updateField('titulo', e.target.value)}
            className={inputClass}
          />
        </div>
        <div>
          <label className={labelClass}>Duración Total</label>
          <input
            type="text"
            value={edited.duracionTotal || ''}
            onChange={(e) => updateField('duracionTotal', e.target.value)}
            placeholder="3:00 min"
            className={inputClass}
          />
        </div>
        <div>
          <label className={labelClass}>Virtud Ganada</label>
          <input
            type="text"
            value={edited.virtudGanada || ''}
            onChange={(e) => updateField('virtudGanada', e.target.value)}
            className={inputClass}
          />
        </div>
        <div>
          <label className={labelClass}>Gema Ganada</label>
          <input
            type="text"
            value={edited.gemaGanada || ''}
            onChange={(e) => updateField('gemaGanada', e.target.value)}
            className={inputClass}
          />
        </div>
        <div>
          <label className={labelClass}>Nudo del Mundo</label>
          <input
            type="text"
            value={edited.nudoDelMundo || ''}
            onChange={(e) => updateField('nudoDelMundo', e.target.value)}
            className={inputClass}
          />
        </div>
      </div>

      {/* Aliado */}
      <div className="border border-stone-200 rounded-lg p-3">
        <span className="text-xs font-medium text-stone-400 uppercase tracking-wide">Aliado</span>
        <div className="grid grid-cols-3 gap-3 mt-2">
          <div>
            <label className={labelClass}>Nombre</label>
            <input
              type="text"
              value={edited.aliado?.nombre || ''}
              onChange={(e) => updateAliado('nombre', e.target.value)}
              className={inputClass}
            />
          </div>
          <div className="col-span-2">
            <label className={labelClass}>Descripción</label>
            <input
              type="text"
              value={edited.aliado?.descripcion || ''}
              onChange={(e) => updateAliado('descripcion', e.target.value)}
              className={inputClass}
            />
          </div>
        </div>
      </div>

      {/* Actos */}
      {edited.actos && edited.actos.length > 0 && (
        <div className="space-y-3">
          <span className="text-xs font-medium text-stone-400 uppercase tracking-wide">Actos y Segmentos</span>
          {edited.actos.map((acto, actoIdx) => (
            <div key={actoIdx} className="border border-stone-200 rounded-lg overflow-hidden">
              {/* Acto header */}
              <button
                onClick={() => setExpandedActo(expandedActo === actoIdx ? null : actoIdx)}
                className="w-full px-3 py-2 bg-stone-50 flex items-center justify-between hover:bg-stone-100 transition-colors"
              >
                <div className="flex items-center gap-2">
                  <span className="w-5 h-5 bg-indigo-50 text-indigo-600 rounded text-[10px] font-bold flex items-center justify-center">
                    {acto.numero}
                  </span>
                  <span className="text-sm font-medium text-stone-700">{acto.nombre || `Acto ${acto.numero}`}</span>
                  <span className="text-xs text-stone-400">{acto.tiempoInicio} - {acto.tiempoFin}</span>
                  <span className="text-[10px] text-stone-400 bg-stone-100 px-1.5 py-0.5 rounded">{acto.segmentos.length} seg.</span>
                </div>
                {expandedActo === actoIdx ? <ChevronUp className="w-3.5 h-3.5 text-stone-400" /> : <ChevronDown className="w-3.5 h-3.5 text-stone-400" />}
              </button>

              {expandedActo === actoIdx && (
                <div className="p-3 space-y-3">
                  {/* Acto fields */}
                  <div className="grid grid-cols-3 gap-3">
                    <div>
                      <label className={labelClass}>Nombre</label>
                      <input
                        type="text"
                        value={acto.nombre || ''}
                        onChange={(e) => updateActo(actoIdx, 'nombre', e.target.value)}
                        className={inputClass}
                      />
                    </div>
                    <div>
                      <label className={labelClass}>Tiempo Inicio</label>
                      <input
                        type="text"
                        value={acto.tiempoInicio || ''}
                        onChange={(e) => updateActo(actoIdx, 'tiempoInicio', e.target.value)}
                        placeholder="0:00"
                        className={inputClass}
                      />
                    </div>
                    <div>
                      <label className={labelClass}>Tiempo Fin</label>
                      <input
                        type="text"
                        value={acto.tiempoFin || ''}
                        onChange={(e) => updateActo(actoIdx, 'tiempoFin', e.target.value)}
                        placeholder="1:00"
                        className={inputClass}
                      />
                    </div>
                  </div>

                  {/* Segmentos */}
                  <div className="space-y-2">
                    {acto.segmentos.map((seg, segIdx) => (
                      <div key={segIdx} className="bg-stone-50/50 border border-stone-100 rounded-lg p-3">
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-xs font-semibold text-stone-600">{seg.id}</span>
                          <button
                            onClick={() => removeSegmento(actoIdx, segIdx)}
                            className="text-stone-300 hover:text-red-500 transition-colors"
                          >
                            <Trash2 className="w-3 h-3" />
                          </button>
                        </div>
                        <div className="grid grid-cols-2 gap-2">
                          <div>
                            <label className={labelClass}>Nombre</label>
                            <input
                              type="text"
                              value={seg.nombre || ''}
                              onChange={(e) => updateSegmento(actoIdx, segIdx, 'nombre', e.target.value)}
                              className={inputClass}
                            />
                          </div>
                          <div>
                            <label className={labelClass}>Tiempo</label>
                            <input
                              type="text"
                              value={seg.tiempo || ''}
                              onChange={(e) => updateSegmento(actoIdx, segIdx, 'tiempo', e.target.value)}
                              placeholder="0:00 - 0:30"
                              className={inputClass}
                            />
                          </div>
                          <div className="col-span-2">
                            <label className={labelClass}>Acción Visual Clave</label>
                            <textarea
                              value={seg.accionVisualClave || ''}
                              onChange={(e) => updateSegmento(actoIdx, segIdx, 'accionVisualClave', e.target.value)}
                              rows={2}
                              className={inputClass + ' resize-y font-mono text-xs'}
                            />
                          </div>
                          <div className="col-span-2">
                            <label className={labelClass}>Diseño de Fondo</label>
                            <textarea
                              value={seg.disenoFondo || ''}
                              onChange={(e) => updateSegmento(actoIdx, segIdx, 'disenoFondo', e.target.value)}
                              rows={2}
                              placeholder="Descripción del escenario, ambiente, iluminación..."
                              className={inputClass + ' resize-y font-mono text-xs'}
                            />
                          </div>
                          <div className="col-span-2">
                            <label className={labelClass}>Diseño de Sonido</label>
                            <input
                              type="text"
                              value={seg.disenoSonido || ''}
                              onChange={(e) => updateSegmento(actoIdx, segIdx, 'disenoSonido', e.target.value)}
                              className={inputClass}
                            />
                          </div>
                        </div>
                      </div>
                    ))}
                    <button
                      onClick={() => addSegmento(actoIdx)}
                      className="w-full py-1.5 text-xs font-medium text-indigo-500 hover:text-indigo-700 hover:bg-indigo-50 rounded border border-dashed border-stone-200 transition-colors flex items-center justify-center gap-1"
                    >
                      <Plus className="w-3 h-3" />
                      Añadir segmento
                    </button>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      {/* Actions */}
      <div className="flex items-center justify-end gap-2 pt-2 border-t border-stone-100">
        <Button variant="ghost" size="sm" onClick={onCancel}>
          Cancelar
        </Button>
        <Button size="sm" onClick={handleSave} loading={saving}>
          <Save className="w-3.5 h-3.5" />
          Guardar campos
        </Button>
      </div>
    </div>
  );
}
