import React, { useState } from 'react';
import { ArrowRight, Users, FlaskConical } from 'lucide-react';

const StudyDesignWidget: React.FC = () => {
  const [isRandomSample, setIsRandomSample] = useState(false);
  const [isRandomAssign, setIsRandomAssign] = useState(false);

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
           {/* Sampling */}
           <div className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${isRandomSample ? 'border-amber-500 bg-amber-50' : 'border-slate-200 hover:border-amber-200'}`}
                onClick={() => setIsRandomSample(!isRandomSample)}>
               <div className="flex items-center gap-3 mb-2">
                   <div className={`w-8 h-8 rounded-full flex items-center justify-center ${isRandomSample ? 'bg-amber-500 text-white' : 'bg-slate-200'}`}>
                       <Users className="w-4 h-4" />
                   </div>
                   <h4 className="font-bold text-slate-800">Selection Method</h4>
               </div>
               <p className="text-sm text-slate-600 mb-3">How were participants chosen?</p>
               <div className="flex justify-between items-center bg-white p-2 rounded border border-slate-100">
                   <span className="text-xs font-bold uppercase text-slate-400">Current:</span>
                   <span className={`font-bold ${isRandomSample ? 'text-amber-600' : 'text-slate-500'}`}>
                       {isRandomSample ? "Random Sample" : "Convenience / Voluntary"}
                   </span>
               </div>
           </div>

           {/* Assignment */}
           <div className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${isRandomAssign ? 'border-amber-500 bg-amber-50' : 'border-slate-200 hover:border-amber-200'}`}
                onClick={() => setIsRandomAssign(!isRandomAssign)}>
               <div className="flex items-center gap-3 mb-2">
                   <div className={`w-8 h-8 rounded-full flex items-center justify-center ${isRandomAssign ? 'bg-amber-500 text-white' : 'bg-slate-200'}`}>
                       <FlaskConical className="w-4 h-4" />
                   </div>
                   <h4 className="font-bold text-slate-800">Assignment Method</h4>
               </div>
               <p className="text-sm text-slate-600 mb-3">How were treatments assigned?</p>
               <div className="flex justify-between items-center bg-white p-2 rounded border border-slate-100">
                   <span className="text-xs font-bold uppercase text-slate-400">Current:</span>
                   <span className={`font-bold ${isRandomAssign ? 'text-amber-600' : 'text-slate-500'}`}>
                       {isRandomAssign ? "Random Assignment" : "Observational / None"}
                   </span>
               </div>
           </div>
       </div>

       {/* Conclusions */}
       <div className="bg-slate-900 text-white p-6 rounded-xl relative overflow-hidden">
           <div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-8">
               <div>
                   <h4 className="text-slate-400 text-xs font-bold uppercase mb-1">Generalization</h4>
                   <p className="text-lg font-bold mb-2">
                       Can apply to Population?
                   </p>
                   <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full font-bold text-sm ${isRandomSample ? 'bg-green-500 text-white' : 'bg-red-500 text-white'}`}>
                       {isRandomSample ? <ArrowRight className="w-4 h-4" /> : null}
                       {isRandomSample ? "YES" : "NO (Sample Only)"}
                   </div>
                   <p className="text-xs text-slate-400 mt-2">
                       {isRandomSample 
                         ? "Random sampling reduces bias, allowing results to represent the whole population." 
                         : "Without random sampling, results may be biased and only apply to the specific people studied."}
                   </p>
               </div>

               <div>
                   <h4 className="text-slate-400 text-xs font-bold uppercase mb-1">Causation</h4>
                   <p className="text-lg font-bold mb-2">
                       Can prove Cause & Effect?
                   </p>
                   <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full font-bold text-sm ${isRandomAssign ? 'bg-green-500 text-white' : 'bg-red-500 text-white'}`}>
                       {isRandomAssign ? <ArrowRight className="w-4 h-4" /> : null}
                       {isRandomAssign ? "YES" : "NO (Association Only)"}
                   </div>
                   <p className="text-xs text-slate-400 mt-2">
                       {isRandomAssign 
                         ? "Random assignment creates comparable groups, so differences can be attributed to the treatment." 
                         : "Without random assignment (experiment), confounding variables might explain the difference."}
                   </p>
               </div>
           </div>
       </div>
    </div>
  );
};

export default StudyDesignWidget;