import React, { useState } from 'react';
import { X, Info, CheckCircle, AlertTriangle, MessageSquare, Calendar, ChevronDown, ChevronUp } from 'lucide-react';
import { Button } from './Button';

interface FeedbackModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (feedbackData: any) => Promise<void>;
  loading: boolean;
}

export const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, onSubmit, loading }) => {
  // --- STATE ---
  const [mainDecision, setMainDecision] = useState<'approved' | 'minor' | 'major' | null>(null);
  
  // Approval Flow
  const [approvalConfirmed, setApprovalConfirmed] = useState(false);

  // Revision Flow
  const [designCheckboxes, setDesignCheckboxes] = useState<string[]>([]);
  const [designText, setDesignText] = useState('');
  
  const [contentCheckboxes, setContentCheckboxes] = useState<string[]>([]);
  const [contentText, setContentText] = useState('');

  const [structureCheckboxes, setStructureCheckboxes] = useState<string[]>([]);
  const [structureText, setStructureText] = useState('');

  const [funcCheckboxes, setFuncCheckboxes] = useState<string[]>([]);
  const [funcText, setFuncText] = useState('');

  const [priorityText, setPriorityText] = useState('');
  
  const [deadlineType, setDeadlineType] = useState<'none' | 'date' | 'discuss'>('none');
  const [deadlineDate, setDeadlineDate] = useState('');

  const [extraNotes, setExtraNotes] = useState('');
  
  const [revisionConfirmed, setRevisionConfirmed] = useState(false);

  if (!isOpen) return null;

  // --- HANDLERS ---
  const handleCheckbox = (
    currentList: string[], 
    setList: React.Dispatch<React.SetStateAction<string[]>>, 
    value: string,
    noneValue: string
  ) => {
    if (value === noneValue) {
      if (currentList.includes(noneValue)) {
        setList([]);
      } else {
        setList([noneValue]);
      }
    } else {
      let newList = currentList.filter(item => item !== noneValue);
      if (newList.includes(value)) {
        newList = newList.filter(item => item !== value);
      } else {
        newList = [...newList, value];
      }
      setList(newList);
    }
  };

  const isRevision = mainDecision === 'minor' || mainDecision === 'major';

  const handleSubmit = () => {
    const feedbackData = {
      decision: mainDecision,
      submittedAt: new Date().toISOString(),
      approval: mainDecision === 'approved' ? {
        confirmed: approvalConfirmed
      } : null,
      revision: isRevision ? {
        design: { selected: designCheckboxes, comment: designText },
        content: { selected: contentCheckboxes, comment: contentText },
        structure: { selected: structureCheckboxes, comment: structureText },
        functionality: { selected: funcCheckboxes, comment: funcText },
        priority: priorityText,
        deadline: { type: deadlineType, date: deadlineDate },
        extraNotes: extraNotes,
        confirmed: revisionConfirmed
      } : null
    };
    
    onSubmit(feedbackData);
  };

  const commonInputStyles = "w-full p-4 border border-gray-300 rounded-xl text-sm font-medium text-black placeholder-gray-400 focus:ring-4 focus:ring-primary/10 focus:border-primary outline-none bg-white transition-all shadow-sm";

  const renderFeedbackCategory = (
    title: string,
    options: string[],
    selected: string[],
    setSelected: React.Dispatch<React.SetStateAction<string[]>>,
    textValue: string,
    setTextValue: React.Dispatch<React.SetStateAction<string>>,
    placeholder: string
  ) => {
    const noneOption = options[options.length - 1];
    const showTextarea = selected.length > 0 && !selected.includes(noneOption);

    return (
      <div className="mb-6 bg-gray-50/50 p-6 rounded-2xl border border-gray-100 shadow-sm">
        <h4 className="font-bold text-gray-800 mb-4 text-sm uppercase tracking-widest">{title}</h4>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
          {options.map(opt => (
            <label key={opt} className={`flex items-center space-x-3 p-3 rounded-xl cursor-pointer border-2 transition-all ${selected.includes(opt) ? 'bg-white border-primary shadow-md' : 'bg-white/50 border-transparent hover:border-gray-200'}`}>
              <input 
                type="checkbox" 
                checked={selected.includes(opt)}
                onChange={() => handleCheckbox(selected, setSelected, opt, noneOption)}
                className="rounded text-primary focus:ring-primary w-5 h-5 border-gray-300"
              />
              <span className={`text-sm font-semibold ${selected.includes(opt) ? 'text-primary' : 'text-gray-600'}`}>{opt}</span>
            </label>
          ))}
        </div>
        {showTextarea && (
          <textarea
            value={textValue}
            onChange={(e) => setTextValue(e.target.value)}
            className={`${commonInputStyles} animate-fade-in mt-2`}
            rows={3}
            placeholder={placeholder}
          ></textarea>
        )}
      </div>
    );
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-gray-900/75 backdrop-blur-sm overflow-y-auto">
      <div className="bg-white rounded-3xl shadow-2xl w-full max-w-3xl flex flex-col my-8 relative animate-fade-in-up border border-white/20">
        
        <button onClick={onClose} className="absolute top-6 right-6 p-2 hover:bg-gray-100 rounded-full transition-colors z-10 bg-white shadow-sm border border-gray-100">
          <X className="w-5 h-5 text-gray-500" />
        </button>

        <div className="p-8 border-b border-gray-100 bg-gradient-to-r from-blue-50/50 to-purple-50/50 rounded-t-3xl">
          <div className="flex items-start gap-4">
            <div className="bg-white p-3 rounded-2xl shadow-md text-primary border border-gray-100">
              <MessageSquare className="w-6 h-6" />
            </div>
            <div>
              <h2 className="text-2xl font-black text-gray-900 tracking-tighter">Visszajelzés a Weboldalról</h2>
              <p className="text-sm text-gray-500 font-medium mt-1">A bemutató verzió alapján kérjük jelezd, ha valamit módosítanál.</p>
            </div>
          </div>
        </div>

        <div className="p-8 md:p-10 space-y-10">
          <div>
            <h3 className="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2">
               Döntés a továbblépésről <span className="text-red-500">*</span>
            </h3>
            <div className="grid grid-cols-1 gap-4">
              {[
                { id: 'approved', label: 'Igen, jóváhagyom a terveket', color: 'green', icon: '✅' },
                { id: 'minor', label: 'Alapvetően jó, de kisebb javításokat kérek', color: 'yellow', icon: '🔧' },
                { id: 'major', label: 'Nem megfelelő, jelentős módosításra van szükség', color: 'red', icon: '❌' }
              ].map(opt => (
                <label key={opt.id} className={`flex items-center p-5 border-2 rounded-2xl cursor-pointer transition-all ${mainDecision === opt.id ? `border-${opt.color}-500 bg-${opt.color}-50 shadow-lg ring-1 ring-${opt.color}-500` : 'border-gray-100 hover:border-gray-200'}`}>
                  <input 
                    type="radio" 
                    name="decision" 
                    checked={mainDecision === opt.id} 
                    onChange={() => setMainDecision(opt.id as any)}
                    className={`w-6 h-6 text-${opt.color}-600 focus:ring-${opt.color}-500 border-gray-300`}
                  />
                  <span className="ml-4 font-bold text-gray-900">{opt.icon} {opt.label}</span>
                </label>
              ))}
            </div>
          </div>

          {mainDecision === 'approved' && (
            <div className="animate-fade-in bg-green-50 p-6 rounded-2xl border-2 border-green-200 shadow-inner">
              <h3 className="text-green-900 font-black mb-4 flex items-center gap-2 uppercase text-sm tracking-widest">
                <CheckCircle className="w-5 h-5" /> Megerősítés
              </h3>
              <label className="flex items-start cursor-pointer group">
                <input 
                  type="checkbox" 
                  checked={approvalConfirmed}
                  onChange={(e) => setApprovalConfirmed(e.target.checked)}
                  className="mt-1 w-6 h-6 text-green-600 rounded-lg focus:ring-green-500 border-green-300"
                />
                <span className="ml-4 text-sm text-green-800 font-bold leading-relaxed">
                  Tudomásul veszem, hogy a jóváhagyás után a végleges fejlesztés megkezdődik a tervek alapján.
                </span>
              </label>
            </div>
          )}

          {isRevision && (
            <div className="animate-fade-in space-y-8 border-t border-gray-100 pt-10">
              
              {renderFeedbackCategory(
                "Dizájn módosítások",
                ["Színek", "Betűtípusok", "Elrendezés", "Képek / Illusztrációk", "Nem szeretnék dizájn módosítást"],
                designCheckboxes, setDesignCheckboxes,
                designText, setDesignText,
                "Írd le pontosan, mit változtatnál a megjelenésen..."
              )}

              {renderFeedbackCategory(
                "Tartalmi változtatások",
                ["Szövegek stílusa", "Adatok pontosítása", "Hiányzó tartalom", "Nem szeretnék tartalmi módosítást"],
                contentCheckboxes, setContentCheckboxes,
                contentText, setContentText,
                "Írd le a szöveges módosításokat..."
              )}

              <div>
                <h3 className="text-sm font-black text-gray-900 mb-3 uppercase tracking-widest">Mi a legfontosabb kérésed? <span className="text-red-500">*</span></h3>
                <textarea
                  value={priorityText}
                  onChange={(e) => setPriorityText(e.target.value)}
                  className={commonInputStyles}
                  rows={2}
                  placeholder="A legkritikusabb pont, amin változtatni kell..."
                ></textarea>
              </div>

              <div>
                <h3 className="text-sm font-black text-gray-900 mb-3 uppercase tracking-widest">Egyéb észrevételek</h3>
                <textarea
                  value={extraNotes}
                  onChange={(e) => setExtraNotes(e.target.value)}
                  className={commonInputStyles}
                  rows={4}
                  placeholder="Bármi egyéb megjegyzés..."
                ></textarea>
              </div>

              <div className="bg-yellow-50 p-6 rounded-2xl border-2 border-yellow-200 shadow-inner">
                <label className="flex items-start cursor-pointer">
                  <input 
                    type="checkbox" 
                    checked={revisionConfirmed}
                    onChange={(e) => setRevisionConfirmed(e.target.checked)}
                    className="mt-1 w-6 h-6 text-yellow-600 rounded-lg focus:ring-yellow-500 border-yellow-300"
                  />
                  <span className="ml-4 text-sm text-yellow-900 font-bold leading-relaxed">
                    Tudomásul veszem, hogy a kért módosítások feldolgozása után kollégáik keresni fognak az újabb verzióval.
                  </span>
                </label>
              </div>

            </div>
          )}
        </div>

        <div className="p-8 border-t border-gray-100 bg-gray-50/50 rounded-b-3xl flex flex-col sm:flex-row justify-end gap-4">
          <Button variant="white" onClick={onClose} disabled={loading} className="px-10 border-gray-200">Mégse</Button>
          
          {mainDecision === 'approved' && (
            <Button 
              onClick={handleSubmit} 
              disabled={loading || !approvalConfirmed}
              className="bg-green-600 hover:bg-green-700 text-white font-black uppercase tracking-widest px-10 shadow-lg shadow-green-200"
            >
              {loading ? 'Küldés...' : 'Végleges Jóváhagyás'}
            </Button>
          )}

          {isRevision && (
            <Button 
              onClick={handleSubmit} 
              disabled={loading || !revisionConfirmed || !priorityText.trim()}
              className="font-black uppercase tracking-widest px-10 shadow-lg shadow-primary/20"
            >
              {loading ? 'Küldés...' : 'Visszajelzés Elküldése'}
            </Button>
          )}

          {!mainDecision && (
            <Button disabled className="opacity-50 cursor-not-allowed font-black uppercase tracking-widest px-10">
              Válasszon opciót
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};