'use client';

import { MissionVisionSectionProps, MissionData, VisionData } from '@/lib/page-builder/types';
import { EditorProps } from '@/lib/page-builder/types';
import { useState } from 'react';

const availableIcons = [
  { value: 'Target', label: 'Target (Mission)' },
  { value: 'Eye', label: 'Eye (Vision)' },
  { value: 'TrendingUp', label: 'Trending Up' },
  { value: 'Shield', label: 'Shield' },
  { value: 'Zap', label: 'Zap' },
  { value: 'Users', label: 'Users' },
];

export default function MissionVisionSectionEditor({ props, onUpdate }: EditorProps<MissionVisionSectionProps>) {
  const [newMissionPoint, setNewMissionPoint] = useState('');
  const [newVisionPoint, setNewVisionPoint] = useState('');

  const handleChange = (field: keyof MissionVisionSectionProps, value: unknown) => {
    onUpdate({ ...props, [field]: value });
  };

  const handleMissionChange = (field: keyof MissionData, value: unknown) => {
    onUpdate({
      ...props,
      mission: { ...props.mission, [field]: value }
    });
  };

  const handleVisionChange = (field: keyof VisionData, value: unknown) => {
    onUpdate({
      ...props,
      vision: { ...props.vision, [field]: value }
    });
  };

  const addMissionPoint = () => {
    if (newMissionPoint.trim()) {
      const updatedPoints = [...(props.mission?.points || []), newMissionPoint];
      handleMissionChange('points', updatedPoints);
      setNewMissionPoint('');
    }
  };

  const removeMissionPoint = (index: number) => {
    const updatedPoints = props.mission?.points?.filter((_, i) => i !== index) || [];
    handleMissionChange('points', updatedPoints);
  };

  const addVisionPoint = () => {
    if (newVisionPoint.trim()) {
      const updatedPoints = [...(props.vision?.points || []), newVisionPoint];
      handleVisionChange('points', updatedPoints);
      setNewVisionPoint('');
    }
  };

  const removeVisionPoint = (index: number) => {
    const updatedPoints = props.vision?.points?.filter((_, i) => i !== index) || [];
    handleVisionChange('points', updatedPoints);
  };

  return (
    <div className="space-y-6 max-h-[70vh] overflow-y-auto p-1">
      <h4 className="font-semibold text-lg text-var-text border-b border-var-border pb-2">
        Mission & Vision Section
      </h4>

      {/* Layout Selection */}
      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Layout Style</label>
        <select
          value={props.layout || 'side-by-side'}
          onChange={(e) => handleChange('layout', e.target.value as 'side-by-side' | 'stacked')}
          className="w-full p-2 bg-var-input border border-var-border rounded text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
        >
          <option value="side-by-side">Side by Side (2 Columns)</option>
          <option value="stacked">Stacked (Vertical)</option>
        </select>
        <p className="text-xs text-var-text-muted mt-1">
          Side by side better for desktop, stacked for more content
        </p>
      </div>

      {/* Mission Section */}
      <div className="border border-var-border rounded-lg p-4 bg-var-surface">
        <h5 className="font-semibold text-var-text text-lg mb-4 flex items-center gap-2">
          <span className="w-3 h-3 bg-[#0066FF] rounded-full"></span>
          Mission Section
        </h5>

        <div className="space-y-4">
          {/* Mission Icon */}
          <div>
            <label className="block text-sm font-medium text-var-text mb-1">Icon</label>
            <select
              value={props.mission?.icon || 'Target'}
              onChange={(e) => handleMissionChange('icon', e.target.value)}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            >
              {availableIcons.map((icon) => (
                <option key={icon.value} value={icon.value}>
                  {icon.label}
                </option>
              ))}
            </select>
          </div>

          {/* Mission Title */}
          <div>
            <label className="block text-sm font-medium text-var-text mb-1">Title</label>
            <input
              type="text"
              value={props.mission?.title || 'Our Mission'}
              onChange={(e) => handleMissionChange('title', e.target.value)}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            />
          </div>

          {/* Mission Description */}
          <div>
            <label className="block text-sm font-medium text-var-text mb-1">Description</label>
            <textarea
              value={props.mission?.description || ''}
              onChange={(e) => handleMissionChange('description', e.target.value)}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
              rows={3}
            />
          </div>

          {/* Mission Points */}
          <div>
            <label className="block text-sm font-medium text-var-text mb-2">Key Focus Areas (Points)</label>
            
            <div className="flex gap-2 mb-2">
              <input
                type="text"
                value={newMissionPoint}
                onChange={(e) => setNewMissionPoint(e.target.value)}
                className="flex-1 p-2 bg-var-input border border-var-border rounded text-sm text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                placeholder="Add a key focus area..."
              />
              <button
                onClick={addMissionPoint}
                disabled={!newMissionPoint.trim()}
                className="px-3 bg-[#0066FF] text-white rounded text-sm hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
              >
                Add
              </button>
            </div>

            <div className="space-y-2 mt-2">
              {props.mission?.points?.map((point, index) => (
                <div key={index} className="flex items-center justify-between bg-var-surface-hover p-2 rounded border border-var-border">
                  <span className="text-sm text-var-text">{point}</span>
                  <button
                    onClick={() => removeMissionPoint(index)}
                    className="text-red-500 text-xs hover:text-red-700"
                  >
                    Remove
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Vision Section */}
      <div className="border border-var-border rounded-lg p-4 bg-var-surface">
        <h5 className="font-semibold text-var-text text-lg mb-4 flex items-center gap-2">
          <span className="w-3 h-3 bg-[#FF6B35] rounded-full"></span>
          Vision Section
        </h5>

        <div className="space-y-4">
          {/* Vision Icon */}
          <div>
            <label className="block text-sm font-medium text-var-text mb-1">Icon</label>
            <select
              value={props.vision?.icon || 'Eye'}
              onChange={(e) => handleVisionChange('icon', e.target.value)}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            >
              {availableIcons.map((icon) => (
                <option key={icon.value} value={icon.value}>
                  {icon.label}
                </option>
              ))}
            </select>
          </div>

          {/* Vision Title */}
          <div>
            <label className="block text-sm font-medium text-var-text mb-1">Title</label>
            <input
              type="text"
              value={props.vision?.title || 'Our Vision'}
              onChange={(e) => handleVisionChange('title', e.target.value)}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
            />
          </div>

          {/* Vision Description */}
          <div>
            <label className="block text-sm font-medium text-var-text mb-1">Description</label>
            <textarea
              value={props.vision?.description || ''}
              onChange={(e) => handleVisionChange('description', e.target.value)}
              className="w-full p-2 bg-var-input border border-var-border rounded text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
              rows={3}
            />
          </div>

          {/* Vision Points */}
          <div>
            <label className="block text-sm font-medium text-var-text mb-2">Key Focus Areas (Points)</label>
            
            <div className="flex gap-2 mb-2">
              <input
                type="text"
                value={newVisionPoint}
                onChange={(e) => setNewVisionPoint(e.target.value)}
                className="flex-1 p-2 bg-var-input border border-var-border rounded text-sm text-var-text focus:ring-2 focus:ring-var-primary focus:border-var-primary"
                placeholder="Add a key focus area..."
              />
              <button
                onClick={addVisionPoint}
                disabled={!newVisionPoint.trim()}
                className="px-3 bg-[#FF6B35] text-white rounded text-sm hover:bg-orange-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
              >
                Add
              </button>
            </div>

            <div className="space-y-2 mt-2">
              {props.vision?.points?.map((point, index) => (
                <div key={index} className="flex items-center justify-between bg-var-surface-hover p-2 rounded border border-var-border">
                  <span className="text-sm text-var-text">{point}</span>
                  <button
                    onClick={() => removeVisionPoint(index)}
                    className="text-red-500 text-xs hover:text-red-700"
                  >
                    Remove
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Preview Note */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800">
        <strong>💡 Tip:</strong> Mission focuses on what you do today, Vision focuses on where you want to be tomorrow.
      </div>
    </div>
  );
}