import React from 'react';
import { WizardState, Waypoint } from '../types';
import { Plus, Trash2, MapPin } from 'lucide-react';

interface StepWaypointsProps {
  data: WizardState;
  updateData: (updates: Partial<WizardState>) => void;
}

const StepWaypoints: React.FC<StepWaypointsProps> = ({ data, updateData }) => {
  
  const addWaypoint = () => {
    if (data.waypoints.length >= 10) return;
    const newWaypoint: Waypoint = {
      id: crypto.randomUUID(),
      header: '',
      context: ''
    };
    updateData({ waypoints: [...data.waypoints, newWaypoint] });
  };

  const removeWaypoint = (id: string) => {
    if (data.waypoints.length <= 1) return; // Keep at least one
    updateData({ waypoints: data.waypoints.filter(wp => wp.id !== id) });
  };

  const updateWaypoint = (id: string, field: keyof Waypoint, value: string) => {
    const updatedWaypoints = data.waypoints.map(wp => 
      wp.id === id ? { ...wp, [field]: value } : wp
    );
    updateData({ waypoints: updatedWaypoints });
  };

  return (
    <div className="space-y-10 animate-fade-in">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Opisz Kluczowe Momenty</h2>
          <p className="text-gray-500 text-lg">Gdzie nastąpił przełom? Co czułeś?</p>
        </div>
        <div className="text-sm font-bold bg-gray-100 px-4 py-2 rounded-md text-gray-600">
          {data.waypoints.length} / 10
        </div>
      </div>

      <div className="space-y-6">
        {data.waypoints.map((wp, index) => (
          <div key={wp.id} className="group relative bg-white border border-gray-200 rounded-md p-6 hover:border-[#EA4420]/30 transition-all">
            <div className="flex gap-5">
              <div className="mt-2 text-[#EA4420]">
                <MapPin size={28} strokeWidth={1.5} />
              </div>
              <div className="flex-1 space-y-4">
                 <div>
                    <label className="block text-xs font-bold text-gray-400 mb-1 uppercase tracking-wider">
                      Moment {index + 1} - Nagłówek
                    </label>
                    <input
                      type="text"
                      value={wp.header}
                      onChange={(e) => updateWaypoint(wp.id, 'header', e.target.value)}
                      placeholder="np. 10km - Ściana"
                      className="w-full border-b border-gray-200 pb-2 focus:border-[#EA4420] focus:outline-none text-gray-900 font-bold text-lg placeholder-gray-300 bg-transparent transition-colors"
                    />
                 </div>
                 <div>
                    <label className="block text-xs font-bold text-gray-400 mb-1 uppercase tracking-wider">
                      Kontekst / Emocje
                    </label>
                    <textarea
                      value={wp.context}
                      onChange={(e) => updateWaypoint(wp.id, 'context', e.target.value)}
                      placeholder="Co się działo w głowie? Walka ze sobą czy euforia?"
                      rows={2}
                      className="w-full border border-gray-200 rounded-md p-3 text-base text-gray-700 focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none resize-none placeholder-gray-300 bg-gray-50/50"
                    />
                 </div>
              </div>
              
              {data.waypoints.length > 1 && (
                <button 
                  onClick={() => removeWaypoint(wp.id)}
                  className="opacity-0 group-hover:opacity-100 transition-opacity self-start p-2 text-gray-400 hover:text-[#EA4420] hover:bg-red-50 rounded-md"
                  title="Usuń punkt"
                >
                  <Trash2 size={20} />
                </button>
              )}
            </div>
          </div>
        ))}
      </div>

      {data.waypoints.length < 10 && (
        <button
          onClick={addWaypoint}
          className="w-full py-5 border border-dashed border-gray-300 rounded-md text-gray-500 hover:border-[#EA4420] hover:text-[#EA4420] hover:bg-[#EA4420]/5 transition-all flex items-center justify-center space-x-2 group"
        >
          <Plus size={20} className="group-hover:scale-110 transition-transform" />
          <span className="font-semibold">Dodaj kolejny punkt</span>
        </button>
      )}
    </div>
  );
};

export default StepWaypoints;