import { motion } from 'motion/react';
import { ClipboardList } from 'lucide-react';
import { Leader } from '../../types';

interface OpenQuestionsStepProps {
  leaders: Leader[];
  leaderId: string;
  openStrengths: string;
  setOpenStrengths: (val: string) => void;
  openImprovements: string;
  setOpenImprovements: (val: string) => void;
  openSuggestions: string;
  setOpenSuggestions: (val: string) => void;
}

export default function OpenQuestionsStep({
  leaders,
  leaderId,
  openStrengths,
  setOpenStrengths,
  openImprovements,
  setOpenImprovements,
  openSuggestions,
  setOpenSuggestions
}: OpenQuestionsStepProps) {
  const activeLeader = leaders.find(l => l.id === leaderId);

  return (
    <motion.div
      key={`step-suggestions-${leaderId}`}
      initial={{ opacity: 0, x: 15 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -15 }}
      transition={{ duration: 0.18 }}
    >
      <div className="flex items-center gap-3 mb-6 border-b border-slate-100 pb-3">
        <div className="bg-emerald-50 p-2.5 rounded-xl border border-emerald-100 text-emerald-600">
          <ClipboardList className="h-5 w-5" />
        </div>
        <div>
          <h2 className="text-md sm:text-lg font-bold text-slate-800">Bagian C: Pertanyaan Terbuka</h2>
          <p className="text-xs text-slate-500">Berikan aspirasi dan masukan yang membangun bagi <span className="font-bold underline text-slate-700">{activeLeader?.position}</span>.</p>
        </div>
      </div>

      <div className="space-y-6 animate-fadeIn">
        {/* Strength */}
        <div>
          <label htmlFor="area-strengths" className="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2 font-sans">
            1. Apa kekuatan utama kepemimpinan {activeLeader?.position} saat ini?
          </label>
          <textarea
            id="area-strengths"
            value={openStrengths}
            onChange={(e) => setOpenStrengths(e.target.value)}
            rows={3}
            placeholder="Contoh: Sangat objektif, tegas, visioner, dan komunikatif..."
            className="w-full px-4 py-2.5 rounded-xl border border-slate-200 bg-white text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 text-xs sm:text-sm transition shadow-xs"
          />
        </div>

        {/* Improvement */}
        <div>
          <label htmlFor="area-improvements" className="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2 font-sans">
            2. Apa hal yang perlu diperbaiki dari kepemimpinan {activeLeader?.position}?
          </label>
          <textarea
            id="area-improvements"
            value={openImprovements}
            onChange={(e) => setOpenImprovements(e.target.value)}
            rows={3}
            placeholder="Sebutkan hal yang perlu disempurnakan atau ditingkatkan..."
            className="w-full px-4 py-2.5 rounded-xl border border-slate-200 bg-white text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 text-xs sm:text-sm transition shadow-xs"
          />
        </div>

        {/* General Suggestion */}
        <div>
          <label htmlFor="area-suggestions" className="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2 font-sans">
            3. Saran atau usulan kebijakan bagi pengembangan institusi:
          </label>
          <textarea
            id="area-suggestions"
            value={openSuggestions}
            onChange={(e) => setOpenSuggestions(e.target.value)}
            rows={3}
            placeholder="Masukkan saran berkaitan sarana penunjang kependidikan, pendampingan kerja, kesejahteraan, dll..."
            className="w-full px-4 py-2.5 rounded-xl border border-slate-200 bg-white text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 text-xs sm:text-sm transition shadow-xs"
          />
        </div>
      </div>
    </motion.div>
  );
}