'use client';

import Link from 'next/link';
import {
  ArrowLeft,
  BookOpenText,
  CheckSquare,
  FileQuestion,
  Headphones,
  Image as ImageIcon,
  ListChecks,
  ListOrdered,
  MessageCircle,
  MousePointerClick,
  PencilLine,
  Play,
  Shuffle,
  SlidersHorizontal,
  TextCursorInput,
} from 'lucide-react';
import { useState } from 'react';

const exerciseMeta = {
  mcq: { Icon: ListChecks, label: 'Quiz', color: '#7C1D45', tint: '#FCE7F0' },
  jumbled: { Icon: Shuffle, label: 'Arrange', color: '#8B5A00', tint: '#FFF4D6' },
  speaking: { Icon: MessageCircle, label: 'Speak', color: '#0F766E', tint: '#DDFCF8' },
  listening: { Icon: Headphones, label: 'Listen', color: '#1D4ED8', tint: '#E0ECFF' },
  fill: { Icon: TextCursorInput, label: 'Complete', color: '#6D28D9', tint: '#EEE7FF' },
  trueFalse: { Icon: CheckSquare, label: 'Decide', color: '#15803D', tint: '#DCFCE7' },
  sequence: { Icon: ListOrdered, label: 'Order', color: '#C2410C', tint: '#FFEDD5' },
  imageQuestions: { Icon: ImageIcon, label: 'Picture', color: '#0369A1', tint: '#E0F2FE' },
  matching: { Icon: BookOpenText, label: 'Match', color: '#9F1239', tint: '#FFE4E6' },
  pick: { Icon: MousePointerClick, label: 'Pick', color: '#B45309', tint: '#FEF3C7' },
  writing: { Icon: PencilLine, label: 'Write', color: '#4338CA', tint: '#E0E7FF' },
};

function getExerciseMeta(item) {
  const source = `${item.kind || ''} ${item.slug || ''} ${item.label || ''}`.toLowerCase();
  if (source.includes('mcq') || source.includes('multiple')) return exerciseMeta.mcq;
  if (source.includes('jumbled')) return exerciseMeta.jumbled;
  if (source.includes('speak')) return exerciseMeta.speaking;
  if (source.includes('listen')) return exerciseMeta.listening;
  if (source.includes('fill') || source.includes('blank')) return exerciseMeta.fill;
  if (source.includes('true') || source.includes('false')) return exerciseMeta.trueFalse;
  if (source.includes('sequence')) return exerciseMeta.sequence;
  if (source.includes('picture') || source.includes('image')) return exerciseMeta.imageQuestions;
  if (source.includes('definition') || source.includes('match')) return exerciseMeta.matching;
  if (source.includes('pick')) return exerciseMeta.pick;
  if (source.includes('write')) return exerciseMeta.writing;
  return { Icon: FileQuestion, label: 'Practice', color: '#4A1429', tint: '#F8E8EF' };
}

export default function ExerciseSetClient({ exerciseSet }) {
  const [hideCompleted, setHideCompleted] = useState(false);
  const items = hideCompleted ? exerciseSet.items.filter((item) => !item.completed) : exerciseSet.items;
  const completedCount = exerciseSet.items.filter((item) => item.completed).length;

  return (
    <div style={{ maxWidth: '1180px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '18px', padding: '0 14px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>
        <Link href="/account/practice" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', color: '#4A1429', fontWeight: 800, textDecoration: 'none' }}>
          <ArrowLeft style={{ width: '16px', height: '16px' }} />
          Back to Practice
        </Link>
        <label style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', color: '#4A1429', fontSize: '13px', fontWeight: 800, cursor: 'pointer', background: '#fff', border: '1px solid #E7D8DF', borderRadius: '999px', padding: '8px 12px', boxShadow: '0 1px 2px rgba(45,10,24,0.05)' }}>
          <input type="checkbox" checked={hideCompleted} onChange={(event) => setHideCompleted(event.target.checked)} style={{ accentColor: '#4A1429' }} />
          <SlidersHorizontal style={{ width: '15px', height: '15px' }} />
          Hide completed
        </label>
      </div>

      <section style={{ display: 'flex', justifyContent: 'space-between', gap: '12px', alignItems: 'center', flexWrap: 'wrap', background: '#fff', border: '1px solid #E9DCE2', borderRadius: '8px', padding: '14px 16px', boxShadow: '0 8px 24px rgba(45,10,24,0.06)' }}>
        <div>
          <h1 style={{ color: '#2D0A18', fontSize: '22px', lineHeight: 1.2, fontWeight: 900, margin: 0 }}>Exercise practice</h1>
          <p style={{ color: '#6B5561', fontSize: '13px', fontWeight: 700, margin: '5px 0 0' }}>{completedCount} of {exerciseSet.items.length} completed</p>
        </div>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', color: '#4A1429', background: '#F8E8EF', borderRadius: '999px', padding: '8px 12px', fontSize: '13px', fontWeight: 900 }}>
          <ListChecks style={{ width: '16px', height: '16px' }} />
          {items.length} visible
        </span>
      </section>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '18px' }}>
        {items.map((item) => {
          const { Icon, label, color, tint } = getExerciseMeta(item);
          return (
            <article key={item.slug} style={{ background: '#fff', border: '1px solid #E8DDE2', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 10px 24px rgba(45,10,24,0.07)', minHeight: '214px', display: 'flex', flexDirection: 'column' }}>
              <div style={{ minHeight: '92px', background: `linear-gradient(135deg, ${tint}, #fff)`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px', borderBottom: '1px solid #F1E6EB' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '54px', height: '54px', borderRadius: '8px', color, background: '#fff', boxShadow: '0 8px 18px rgba(45,10,24,0.10)' }}>
                  <Icon style={{ width: '29px', height: '29px', strokeWidth: 2.2 }} />
                </span>
                <span style={{ color, background: '#fff', border: `1px solid ${tint}`, borderRadius: '999px', padding: '5px 9px', fontSize: '11px', fontWeight: 900 }}>
                  {label}
                </span>
              </div>
              <div style={{ padding: '14px', display: 'flex', flexDirection: 'column', gap: '12px', flex: 1 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: '10px', alignItems: 'flex-start' }}>
                  <h2 style={{ color: '#2D0A18', fontWeight: 900, fontSize: '16px', lineHeight: 1.25, margin: 0 }}>{item.label}</h2>
                  <span style={{ flex: '0 0 auto', fontSize: '10px', fontWeight: 900, borderRadius: '999px', padding: '4px 8px', color: item.completed ? '#047857' : '#A16207', background: item.completed ? '#D1FAE5' : '#FEF3C7' }}>
                    {item.completed ? 'Completed' : 'Pending'}
                  </span>
                </div>
                <Link href={item.href} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '8px', width: '100%', marginTop: 'auto', border: '1px solid #4A1429', color: '#fff', background: '#4A1429', borderRadius: '8px', padding: '10px 12px', fontWeight: 900, textDecoration: 'none', boxShadow: '0 8px 16px rgba(74,20,41,0.14)' }}>
                  <Play style={{ width: '15px', height: '15px', fill: 'currentColor' }} />
                  Start
                </Link>
              </div>
            </article>
          );
        })}
      </div>

      {items.length === 0 && (
        <section style={{ background: '#fff', border: '1px solid #E5E7EB', borderRadius: '16px', padding: '44px', textAlign: 'center', color: '#9CA3AF', fontWeight: 700 }}>
          All exercises are completed.
        </section>
      )}
    </div>
  );
}