'use client';

import { taxonomy } from '@/lib/taxonomy/data';

const LAYER_COLORS = {
  conditions: {
    bg: 'bg-yellow-500/10',
    border: 'border-yellow-500/30',
    text: 'text-yellow-400',
    badge: 'bg-yellow-500/20 text-yellow-300',
  },
  management: {
    bg: 'bg-blue-500/10',
    border: 'border-blue-500/30',
    text: 'text-blue-400',
    badge: 'bg-blue-500/20 text-blue-300',
  },
  systemic: {
    bg: 'bg-purple-500/10',
    border: 'border-purple-500/30',
    text: 'text-purple-400',
    badge: 'bg-purple-500/20 text-purple-300',
  },
};

const LAYER_TITLES = {
  conditions: 'Conditions',
  management: 'Management',
  systemic: 'Systemic',
};

const LAYER_DESCRIPTIONS = {
  conditions: 'What allowed the experience to happen?',
  management: 'What decisions allowed enabling conditions?',
  systemic: 'Why does the organization create these conditions?',
};

export default function CausalCodesSection() {
  const layers = ['conditions', 'management', 'systemic'] as const;

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div>
        <h2 className="text-xl font-bold text-gray-100">Causal Codes</h2>
        <p className="text-gray-400 mt-1">
          Three-layer root cause analysis framework with 16 codes
        </p>
      </div>

      {/* Three layers visualization */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        {layers.map((layerKey) => {
          const layer = taxonomy.causal_codes[layerKey];
          const colors = LAYER_COLORS[layerKey];
          const codeCount = Object.keys(layer.codes).length;

          return (
            <div
              key={layerKey}
              className={`rounded-lg border ${colors.border} ${colors.bg} p-4`}
            >
              {/* Layer Header */}
              <div className="flex items-center justify-between mb-3">
                <h3 className={`font-semibold ${colors.text}`}>
                  {LAYER_TITLES[layerKey]}
                </h3>
                <span className={`text-xs px-2 py-0.5 rounded ${colors.badge}`}>
                  {layer.prefix}* ({codeCount})
                </span>
              </div>

              <p className="text-sm text-gray-400 mb-4">
                {LAYER_DESCRIPTIONS[layerKey]}
              </p>

              {/* Codes list */}
              <div className="space-y-2">
                {Object.entries(layer.codes).map(([codeKey, code]) => (
                  <div
                    key={codeKey}
                    className="p-2 bg-gray-800/50 rounded border border-gray-700/50"
                  >
                    <div className="flex items-center gap-2">
                      <span className={`font-mono text-sm ${colors.text}`}>
                        {codeKey}
                      </span>
                      <span className="text-sm text-gray-300">{code.name}</span>
                    </div>
                    <p className="text-xs text-gray-500 mt-1">{code.definition}</p>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>

      {/* Flow Indicator */}
      <div className="flex items-center justify-center gap-4 py-4">
        <div className="flex items-center gap-2 text-sm text-gray-400">
          <span className="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded">
            Conditions
          </span>
          <span className="text-gray-600">→</span>
          <span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded">
            Management
          </span>
          <span className="text-gray-600">→</span>
          <span className="px-3 py-1 bg-purple-500/20 text-purple-400 rounded">
            Systemic
          </span>
        </div>
      </div>

      {/* Usage note */}
      <div className="bg-gray-800/50 border border-gray-700 rounded-lg p-4">
        <h4 className="font-semibold text-gray-200 mb-2">Usage</h4>
        <p className="text-sm text-gray-400">
          Causal codes are used for root cause analysis in URT-Full profile. Start with
          Conditions (immediate factors), trace to Management (decisions that enabled conditions),
          and finally to Systemic (organizational factors that created the management decisions).
        </p>
      </div>
    </div>
  );
}