'use client';

import React, { useEffect } from 'react';
import { SkillsAll, SkillRow } from '../types';
import { green } from '../colors';

const slugify = (name: string) =>
  String(name || '')
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '');

const SkillsAppendixTable = ({ skillsAll }: { skillsAll?: SkillsAll }) => {
  const rows = (skillsAll?.skills || []).filter((row: SkillRow) => row.observed?.present || row.self_reported?.present || row.certified?.present);
  useEffect(() => {
    const flash = () => {
      const hash = typeof window !== 'undefined' ? window.location.hash : '';
      if (!hash) return;
      // Support skill rows and category headers
      const id = hash.startsWith('#') ? hash.slice(1) : hash;
      const el = document.getElementById(id) as HTMLElement | null;
      if (!el) return;
      const originalBg = el.style.backgroundColor;
      el.style.transition = 'background-color 300ms ease';
      el.style.backgroundColor = 'rgba(2, 163, 137, 0.14)';
      setTimeout(() => {
        el.style.backgroundColor = originalBg || '';
      }, 1200);
    };
    flash();
    window.addEventListener('hashchange', flash);
    return () => window.removeEventListener('hashchange', flash);
  }, []);

  if (!rows.length) return null;
  // Group rows by category; skills can be in multiple categories
  const groupMap: Record<string, SkillRow[]> = {};
  const UNCATEGORIZED = 'Uncategorized';
  for (const r of rows) {
    const cats = Array.isArray((r as any).categories) && (r as any).categories.length > 0 ? (r as any).categories as string[] : [UNCATEGORIZED];
    for (const c of cats) {
      const key = c || UNCATEGORIZED;
      if (!groupMap[key]) groupMap[key] = [];
      groupMap[key].push(r);
    }
  }
  const orderedCategories = Object.keys(groupMap).sort((a, b) => {
    if (a === UNCATEGORIZED) return 1;
    if (b === UNCATEGORIZED) return -1;
    return a.localeCompare(b);
  });

  return (
    <div id="appendix-skills" className="mt-4 space-y-8">
      {orderedCategories.map((cat) => (
        <div key={cat}>
          <h5 id={`appendix-skills-cat-${slugify(cat)}`} className={'text-base font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>{cat}</h5>
          <div className={'overflow-auto rounded-lg border'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
            <table className="min-w-full text-sm" style={{ tableLayout: 'fixed', width: '100%' }}>
              <colgroup>
                <col style={{ width: '40%' }} />
                <col style={{ width: '20%' }} />
                <col style={{ width: '20%' }} />
                <col style={{ width: '20%' }} />
              </colgroup>
              <thead>
                <tr style={{ backgroundColor: 'var(--content-card-background)' }}>
                  <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Skill</th>
                  <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Observed</th>
                  <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Self-reported</th>
                  <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Certified</th>
                </tr>
              </thead>
              <tbody>
                {groupMap[cat].map((row, idx: number) => (
                  <tr id={`appendix-skills-${slugify(row.name)}`} key={`${cat}-${idx}`} className="border-t" style={{ borderColor: 'var(--icon-button-secondary)' }}>
                    <td className="p-3" style={{ color: 'var(--text-main)' }}>{row.name}</td>
                    {(['observed','self_reported','certified'] as const).map((b) => {
                      const bucket = row[b];
                      const present = !!bucket.present;
                      const dot = present ? green : 'var(--icon-button-secondary)';
                      const ev = bucket.evidence;
                      const sources = (bucket.sources || []).slice(0,4);
                      return (
                        <td key={b} className="p-3 align-top" style={{ color: 'var(--text-secondary)' }}>
                          <div className="flex items-start gap-2">
                            <div className={'mt-1 rounded-full'} style={{ backgroundColor: dot, minHeight: '8px', minWidth: '8px', height: '8px', width: '8px', flexShrink: 0 }} />
                            <div>
                              {(ev || (sources && sources.length > 0)) && (
                                <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>
                                  {ev ? <div>{ev}</div> : null}
                                </div>
                              )}
                            </div>
                          </div>
                        </td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ))}
    </div>
  );
};

export default SkillsAppendixTable;