import React, { useState } from 'react'
import { ContractTemplate, Phase, Deliverable } from '../../types'

type Props = {
  template: ContractTemplate
  onSave: (template: ContractTemplate) => void
  onCancel: () => void
}

export const TemplateEditor: React.FC<Props> = ({ template, onSave, onCancel }) => {
  const [editedTemplate, setEditedTemplate] = useState<ContractTemplate>({ ...template, phases: template.phases.map(p => ({ ...p, deliverables: [...p.deliverables] })) })
  const [newDeliverableName, setNewDeliverableName] = useState<{ [phaseId: string]: string }>({})

  const handlePhaseNameChange = (phaseId: string, newName: string) => {
    setEditedTemplate(prev => ({
      ...prev,
      phases: prev.phases.map(p =>
        p.id === phaseId ? { ...p, name: newName } : p
      )
    }))
  }

  const handleDeliverableNameChange = (phaseId: string, deliverableId: string, newName: string) => {
    setEditedTemplate(prev => ({
      ...prev,
      phases: prev.phases.map(p =>
        p.id === phaseId
          ? {
              ...p,
              deliverables: p.deliverables.map(d =>
                d.id === deliverableId ? { ...d, name: newName } : d
              )
            }
          : p
      )
    }))
  }

  const handleAddDeliverable = (phaseId: string) => {
    const name = newDeliverableName[phaseId]?.trim()
    if (!name) return

    const newDeliverable: Deliverable = {
      id: `deliverable-${Date.now()}`,
      name
    }

    setEditedTemplate(prev => ({
      ...prev,
      phases: prev.phases.map(p =>
        p.id === phaseId
          ? { ...p, deliverables: [...p.deliverables, newDeliverable] }
          : p
      )
    }))
    setNewDeliverableName(prev => ({ ...prev, [phaseId]: '' }))
  }

  const handleRemoveDeliverable = (phaseId: string, deliverableId: string) => {
    setEditedTemplate(prev => ({
      ...prev,
      phases: prev.phases.map(p =>
        p.id === phaseId
          ? { ...p, deliverables: p.deliverables.filter(d => d.id !== deliverableId) }
          : p
      )
    }))
  }

  const handleAddPhase = () => {
    const newPhase: Phase = {
      id: `phase-${Date.now()}`,
      name: 'New Phase',
      deliverables: []
    }
    setEditedTemplate(prev => ({
      ...prev,
      phases: [...prev.phases, newPhase]
    }))
  }

  const handleRemovePhase = (phaseId: string) => {
    setEditedTemplate(prev => ({
      ...prev,
      phases: prev.phases.filter(p => p.id !== phaseId)
    }))
  }

  return (
    <div className="template-editor">
      <div className="template-editor-header">
        <h2 className="template-editor-title">Edit Template: {template.name}</h2>
        <p className="template-editor-description">{template.description}</p>
      </div>

      <div className="template-editor-content">
        <div className="phases-list">
          {editedTemplate.phases.map((phase, phaseIndex) => (
            <div key={phase.id} className="phase-card">
              <div className="phase-header">
                <span className="phase-number">{phaseIndex + 1}</span>
                <input
                  type="text"
                  className="phase-name-input"
                  value={phase.name}
                  onChange={(e) => handlePhaseNameChange(phase.id, e.target.value)}
                  placeholder="Phase name"
                />
                {!template.isBuiltIn && (
                  <button
                    className="phase-remove-btn"
                    onClick={() => handleRemovePhase(phase.id)}
                    title="Remove phase"
                  >
                    x
                  </button>
                )}
              </div>

              <div className="deliverables-list">
                {phase.deliverables.length === 0 ? (
                  <div className="no-deliverables">No deliverables</div>
                ) : (
                  phase.deliverables.map(deliverable => (
                    <div key={deliverable.id} className="deliverable-item">
                      <input
                        type="text"
                        className="deliverable-name-input"
                        value={deliverable.name}
                        onChange={(e) => handleDeliverableNameChange(phase.id, deliverable.id, e.target.value)}
                      />
                      <button
                        className="deliverable-remove-btn"
                        onClick={() => handleRemoveDeliverable(phase.id, deliverable.id)}
                        title="Remove deliverable"
                      >
                        x
                      </button>
                    </div>
                  ))
                )}

                <div className="add-deliverable-row">
                  <input
                    type="text"
                    className="add-deliverable-input"
                    placeholder="New deliverable name..."
                    value={newDeliverableName[phase.id] || ''}
                    onChange={(e) => setNewDeliverableName(prev => ({ ...prev, [phase.id]: e.target.value }))}
                    onKeyPress={(e) => {
                      if (e.key === 'Enter') {
                        handleAddDeliverable(phase.id)
                      }
                    }}
                  />
                  <button
                    className="add-deliverable-btn"
                    onClick={() => handleAddDeliverable(phase.id)}
                  >
                    + Add
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {!template.isBuiltIn && (
          <button className="add-phase-btn" onClick={handleAddPhase}>
            + Add Phase
          </button>
        )}
      </div>

      <div className="template-editor-footer">
        <button className="modal-btn secondary" onClick={onCancel}>
          Cancel
        </button>
        <button className="modal-btn primary" onClick={() => onSave(editedTemplate)}>
          Save Changes
        </button>
      </div>
    </div>
  )
}