import React, { useState } from 'react';
import { Check, RefreshCw } from 'lucide-react';

const ConstructiveAlignmentGenerator = () => {
  const [activity, setActivity] = useState({ name: '', types: [], description: '' });
  const [alignment, setAlignment] = useState({ achieve: [], construct: [], achieveExplanation: '', constructExplanation: '' });
  const [output, setOutput] = useState('');

  const activityTypes = ['solve problems', 'discuss in groups', 'create a project', 'give presentations', 'analyze case studies', 'conduct experiments'];
  const achieveOptions = ['providing hands-on practice', 'encouraging critical thinking', 'allowing for peer learning', 'applying concepts to real-world situations'];
  const constructOptions = ['actively engaging with the material', 'discussing ideas with peers', 'applying concepts in new contexts', 'reflecting on their learning process', 'connecting new information to prior knowledge'];

  const handleActivityChange = (e) => setActivity({ ...activity, [e.target.name]: e.target.value });
  const handleActivityTypesChange = (type) => {
    setActivity(prev => ({
      ...prev,
      types: prev.types.includes(type) ? prev.types.filter(t => t !== type) : [...prev.types, type]
    }));
  };
  const handleAlignmentChange = (option, category) => {
    setAlignment(prev => ({
      ...prev,
      [category]: prev[category].includes(option) ? prev[category].filter(item => item !== option) : [...prev[category], option]
    }));
  };
  const handleExplanationChange = (e, category) => {
    setAlignment(prev => ({ ...prev, [`${category}Explanation`]: e.target.value }));
  };

  const generateExplanation = () => {
    const explanation = `
      <h2>Constructive Alignment Explanation</h2>

      <h3>Learning Activity: "${activity.name}"</h3>
      <p>In this activity, students will ${activity.types.join(', ')}.</p>
      <p>${activity.description}</p>

      <h3>Alignment Explanation:</h3>
      <h4>a) This activity helps students achieve the ILO by:</h4>
      <ul>
        ${alignment.achieve.map(item => `<li>${item}</li>`).join('')}
      </ul>
      <p>${alignment.achieveExplanation}</p>

      <h4>b) This activity supports students in constructing knowledge by:</h4>
      <ul>
        ${alignment.construct.map(item => `<li>${item}</li>`).join('')}
      </ul>
      <p>${alignment.constructExplanation}</p>
    `;
    setOutput(explanation);
  };

  const resetForm = () => {
    setActivity({ name: '', types: [], description: '' });
    setAlignment({ achieve: [], construct: [], achieveExplanation: '', constructExplanation: '' });
    setOutput('');
  };

  const Section = ({ title, children }) => (
    <div style={{ marginBottom: '30px', background: '#ffffff', padding: '25px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)' }}>
      <h3 style={{ marginTop: 0, color: '#2c3e50', fontSize: '1.5em', marginBottom: '20px' }}>{title}</h3>
      {children}
    </div>
  );

  const Button = ({ onClick, children, color = '#3498db', icon }) => (
    <button 
      onClick={onClick} 
      style={{ 
        padding: '12px 24px', 
        fontSize: '16px', 
        backgroundColor: color, 
        color: 'white', 
        border: 'none', 
        borderRadius: '6px', 
        cursor: 'pointer',
        transition: 'all 0.3s ease',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        margin: '10px 0'
      }}
      onMouseOver={(e) => e.target.style.transform = 'translateY(-2px)'}
      onMouseOut={(e) => e.target.style.transform = 'translateY(0)'}
    >
      {icon && <span style={{ marginRight: '10px' }}>{icon}</span>}
      {children}
    </button>
  );

  const Checkbox = ({ checked, onChange, label }) => (
    <label style={{ display: 'flex', alignItems: 'center', marginBottom: '15px', cursor: 'pointer' }}>
      <div 
        style={{ 
          width: '22px', 
          height: '22px', 
          border: '2px solid #3498db', 
          borderRadius: '4px',
          marginRight: '12px',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: checked ? '#3498db' : 'white',
          transition: 'all 0.2s ease'
        }}
        onClick={onChange}
      >
        {checked && <Check size={16} color="white" />}
      </div>
      <span style={{ fontSize: '16px', color: '#34495e' }}>{label}</span>
    </label>
  );

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '30px', backgroundColor: '#f5f7fa' }}>
      <h1 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '30px' }}>Constructive Alignment Generator</h1>
      
      <div style={{ background: '#ecf0f1', padding: '20px', borderRadius: '8px', marginBottom: '30px' }}>
        <h2 style={{ color: '#34495e', marginTop: 0 }}>Introduction</h2>
        <p style={{ color: '#7f8c8d', lineHeight: '1.6' }}>
          This generator will help you create a constructive alignment explanation for your learning activity. 
          Fill in the details about your activity and how it aligns with your Intended Learning Outcomes (ILOs). 
          The generator will then produce a formatted explanation that you can use in your lesson plan.
        </p>
      </div>

      <Section title="1. Learning Activity">
        <input 
          type="text"
          placeholder="Activity Name" 
          name="name" 
          value={activity.name}
          onChange={handleActivityChange} 
          style={{ width: '100%', padding: '12px', border: '1px solid #bdc3c7', borderRadius: '6px', marginBottom: '15px', fontSize: '16px' }}
        />
        <p style={{ marginBottom: '15px', color: '#34495e' }}>In this activity, students will:</p>
        {activityTypes.map(type => (
          <Checkbox 
            key={type}
            checked={activity.types.includes(type)}
            onChange={() => handleActivityTypesChange(type)}
            label={type}
          />
        ))}
        <textarea 
          placeholder="Brief description of the activity" 
          name="description" 
          value={activity.description}
          onChange={handleActivityChange} 
          style={{ width: '100%', height: '100px', padding: '12px', border: '1px solid #bdc3c7', borderRadius: '6px', marginTop: '15px', fontSize: '16px' }}
        />
      </Section>

      <Section title="2. Alignment Explanation">
        <h4 style={{ color: '#34495e', marginBottom: '15px' }}>a) How this activity helps achieve the ILO:</h4>
        {achieveOptions.map(option => (
          <Checkbox 
            key={option}
            checked={alignment.achieve.includes(option)}
            onChange={() => handleAlignmentChange(option, 'achieve')}
            label={option}
          />
        ))}
        <textarea 
          placeholder="Additional explanation (Consider: How does this activity directly relate to the ILO? What specific skills or knowledge from the ILO does this activity target?)" 
          value={alignment.achieveExplanation}
          onChange={(e) => handleExplanationChange(e, 'achieve')} 
          style={{ width: '100%', height: '100px', padding: '12px', border: '1px solid #bdc3c7', borderRadius: '6px', marginTop: '15px', fontSize: '16px' }}
        />

        <h4 style={{ color: '#34495e', marginTop: '25px', marginBottom: '15px' }}>b) How this activity helps students build their own understanding:</h4>
        {constructOptions.map(option => (
          <Checkbox 
            key={option}
            checked={alignment.construct.includes(option)}
            onChange={() => handleAlignmentChange(option, 'construct')}
            label={option}
          />
        ))}
        <textarea 
          placeholder="Additional explanation (Consider: How does this activity promote active learning? How does it encourage students to engage deeply with the material?)" 
          value={alignment.constructExplanation}
          onChange={(e) => handleExplanationChange(e, 'construct')} 
          style={{ width: '100%', height: '100px', padding: '12px', border: '1px solid #bdc3c7', borderRadius: '6px', marginTop: '15px', fontSize: '16px' }}
        />
      </Section>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '30px' }}>
        <Button onClick={generateExplanation} color="#27ae60">
          Generate Explanation
        </Button>
        <Button onClick={resetForm} color="#e74c3c" icon={<RefreshCw size={18} />}>
          Restart
        </Button>
      </div>

      {output && (
        <Section title="Generated Explanation">
          <div dangerouslySetInnerHTML={{ __html: output }} style={{ background: 'white', padding: '20px', borderRadius: '8px', boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.1)' }} />
        </Section>
      )}
    </div>
  );
};

export default ConstructiveAlignmentGenerator;