'use client';

import React from 'react';
import { FiPaperclip } from 'react-icons/fi';
import type { EditableEntry } from './findings.types';
import { isDraft } from './findings.types';

// ═══════════════════════════════════════════════════════════════════════
// FindingListItem — single item in the left sidebar
// ═══════════════════════════════════════════════════════════════════════

interface Props {
  entry: EditableEntry;
  index: number;
  selected: boolean;
  onSelect: () => void;
}

export default function FindingListItem({
  entry,
  index,
  selected,
  onSelect,
}: Props) {
  const draft = isDraft(entry);
  const stripe = draft
    ? '#92400e'
    : entry.status === 'closed'
      ? '#16a34a'
      : entry.status === 'pending'
        ? '#d97706'
        : '#dc2626';

  const preview =
    (entry.ncr_statement || '').slice(0, 90).replace(/\s+/g, ' ').trim() ||
    (draft ? 'New finding — fill in statement' : 'No statement yet');

  return (
    <button
      onClick={onSelect}
      style={{
        width: '100%',
        textAlign: 'left',
        padding: '12px 13px 12px 13px',
        background: selected ? '#fff' : 'transparent',
        border: 'none',
        borderLeft: `3px solid ${stripe}`,
        borderBottom: '1px solid #f1f5f9',
        cursor: 'pointer',
        position: 'relative',
        transition: 'background 0.12s',
        outline: 'none',
        display: 'block',
      }}
      onMouseEnter={(e) => {
        if (!selected)
          (e.currentTarget as HTMLButtonElement).style.background = '#f8fafc';
      }}
      onMouseLeave={(e) => {
        if (!selected)
          (e.currentTarget as HTMLButtonElement).style.background = 'transparent';
      }}
    >
      {selected && (
        <span
          style={{
            position: 'absolute',
            right: 10,
            top: 14,
            width: 6,
            height: 6,
            background: '#185FA5',
            borderRadius: 50,
            boxShadow: '0 0 0 3px rgba(24, 95, 165, 0.15)',
          }}
        />
      )}

      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: 4,
          paddingRight: selected ? 16 : 0,
        }}
      >
        <span
          style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10,
            color: selected ? '#185FA5' : draft ? '#92400e' : '#94a3b8',
            fontWeight: 700,
            letterSpacing: '0.04em',
          }}
        >
          {draft ? 'NEW' : String(index).padStart(2, '0')}
        </span>
        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          {draft && (
            <span
              style={{
                fontSize: 8,
                padding: '1px 6px',
                background: '#fef3c7',
                color: '#92400e',
                borderRadius: 4,
                fontWeight: 700,
                fontFamily: "'JetBrains Mono', monospace",
                letterSpacing: '0.04em',
              }}
            >
              DRAFT
            </span>
          )}
          {!draft && entry.document_path && (
            <FiPaperclip
              size={11}
              color={entry.status === 'closed' ? '#16a34a' : '#475569'}
              title="Has evidence"
            />
          )}
          {entry._dirty && !draft && (
            <span
              title="Unsaved changes"
              style={{
                width: 6,
                height: 6,
                background: '#f59e0b',
                borderRadius: 50,
              }}
            />
          )}
          {!draft && <NcTypeMini type={entry.nc_type} />}
        </div>
      </div>

      <div
        style={{
          fontSize: 12,
          color: selected ? '#0b1220' : '#1f2937',
          fontWeight: selected ? 600 : 500,
          lineHeight: 1.45,
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          display: '-webkit-box',
          WebkitLineClamp: 2,
          WebkitBoxOrient: 'vertical',
          marginBottom: 4,
          textDecoration:
            !draft && entry.status === 'closed' ? 'line-through' : 'none',
          opacity: !draft && entry.status === 'closed' ? 0.65 : 1,
          fontStyle: draft && !entry.ncr_statement ? 'italic' : 'normal',
        }}
      >
        {preview}
      </div>

      <div
        style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10,
          color: '#94a3b8',
          letterSpacing: '0.02em',
        }}
      >
        {entry.criteria_clause || '—'}
      </div>
    </button>
  );
}

function NcTypeMini({ type }: { type?: string }) {
  const t = (type || '').toLowerCase();
  let label = 'NA';
  let color = '#94a3b8';
  let bg = '#f1f5f9';
  if (t.includes('major')) {
    label = 'MJ';
    color = '#A32D2D';
    bg = '#FCEBEB';
  } else if (t.includes('minor')) {
    label = 'MN';
    color = '#854F0B';
    bg = '#FAEEDA';
  } else if (t.includes('observ')) {
    label = 'OB';
    color = '#0C447C';
    bg = '#E6F1FB';
  }
  return (
    <span
      style={{
        fontSize: 9,
        padding: '1px 5px',
        background: bg,
        color,
        borderRadius: 4,
        fontWeight: 700,
        letterSpacing: '0.03em',
        fontFamily: "'JetBrains Mono', monospace",
      }}
    >
      {label}
    </span>
  );
}