'use client';

import { CheckCircle, XCircle, AlertTriangle } from 'lucide-react';
import type { SelectedSubcode } from '@/lib/taxonomy/types';
import { DOMAIN_TEXT_COLORS, DOMAIN_BG_COLORS, DOMAIN_BORDER_COLORS } from '@/lib/taxonomy/types';

interface SubcodeDetailProps {
  selectedSubcode: SelectedSubcode | null;
}

export default function SubcodeDetail({ selectedSubcode }: SubcodeDetailProps) {
  if (!selectedSubcode) {
    return (
      <div className="flex items-center justify-center h-full text-gray-500">
        <div className="text-center">
          <p className="text-lg">Select a subcode</p>
          <p className="text-sm mt-1">Click on a subcode to view its details</p>
        </div>
      </div>
    );
  }

  const { code, domainKey, domainName, categoryName, subcode } = selectedSubcode;
  const textColor = DOMAIN_TEXT_COLORS[domainKey];
  const bgColor = DOMAIN_BG_COLORS[domainKey];
  const borderColor = DOMAIN_BORDER_COLORS[domainKey];

  return (
    <div className="flex flex-col h-full overflow-y-auto">
      {/* Header */}
      <div className={`p-4 border-b border-gray-700 ${bgColor}`}>
        <h2 className={`text-xl font-bold ${textColor}`}>
          {code} {subcode.name}
        </h2>
        <div className="flex gap-2 mt-2 text-sm text-gray-400">
          <span>Domain: {domainName}</span>
          <span className="text-gray-600">|</span>
          <span>Category: {categoryName}</span>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 p-4 space-y-6">
        {/* Definition */}
        <section>
          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-2">
            Definition
          </h3>
          <p className="text-gray-200">{subcode.definition}</p>
        </section>

        {/* Examples */}
        <section>
          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-3">
            Examples
          </h3>
          <div className="space-y-2">
            {/* Positive Example */}
            <div className="flex items-start gap-3 p-3 rounded-lg bg-green-500/10 border border-green-500/20">
              <CheckCircle className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
              <div>
                <span className="text-xs text-green-400 uppercase font-medium">Positive</span>
                <p className="text-gray-200 mt-0.5">{subcode.positive_example}</p>
              </div>
            </div>

            {/* Negative Example */}
            <div className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
              <XCircle className="w-5 h-5 text-red-400 mt-0.5 flex-shrink-0" />
              <div>
                <span className="text-xs text-red-400 uppercase font-medium">Negative</span>
                <p className="text-gray-200 mt-0.5">{subcode.negative_example}</p>
              </div>
            </div>
          </div>
        </section>

        {/* Don't Confuse With */}
        {subcode.dont_confuse_with && (
          <section>
            <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-3">
              Don&apos;t Confuse With
            </h3>
            <div className={`flex items-start gap-3 p-3 rounded-lg border ${bgColor} ${borderColor}`}>
              <AlertTriangle className="w-5 h-5 text-amber-400 mt-0.5 flex-shrink-0" />
              <div>
                <span className={`font-mono font-medium ${textColor}`}>
                  {subcode.dont_confuse_with}
                </span>
                <p className="text-gray-300 mt-1 text-sm">{subcode.dont_confuse_reason}</p>
              </div>
            </div>
          </section>
        )}
      </div>
    </div>
  );
}