'use client';

import { AlertCircle, CheckCircle2, Trash2 } from 'lucide-react';
import type { TestingIssue } from '../_hooks/useTestFeedback';

interface Props {
  issues: TestingIssue[];
  onResolve: (issueId: string) => void;
  onDelete: (issueId: string) => void;
}

export function IssuesSection({ issues, onResolve, onDelete }: Props) {
  const open = issues.filter((i) => !i.resolved);
  const resolved = issues.filter((i) => i.resolved);

  if (issues.length === 0) return null;

  return (
    <div className="bg-card rounded-xl p-6 shadow-sm border border-border mb-8">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <AlertCircle className="h-5 w-5 text-error" />
          <h2 className="text-lg font-semibold text-text">
            Замечания тестеров
          </h2>
        </div>
        <div className="flex items-center gap-3">
          {open.length > 0 && (
            <span className="text-xs font-semibold px-2.5 py-1 rounded-full bg-error/10 text-error">
              {open.length} открытых
            </span>
          )}
          {resolved.length > 0 && (
            <span className="text-xs font-semibold px-2.5 py-1 rounded-full bg-success/10 text-success">
              {resolved.length} решено
            </span>
          )}
        </div>
      </div>

      {open.length > 0 && (
        <div className="space-y-2 mb-4">
          {open.map((issue) => (
            <div
              key={issue.id}
              className="flex items-start gap-3 px-4 py-3 rounded-lg border border-error/20 bg-error/5"
            >
              <AlertCircle className="h-4 w-4 text-error shrink-0 mt-0.5" />
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 text-xs text-muted mb-1">
                  <span className="font-medium text-text">{issue.service}</span>
                  <span>&rarr;</span>
                  <span>{issue.section}</span>
                </div>
                <p className="text-sm text-text">{issue.instruction}</p>
                <p className="text-sm text-error mt-1">{issue.comment}</p>
                <div className="flex items-center gap-2 mt-1.5 text-xs text-muted">
                  <span>{issue.tester}</span>
                  <span>&middot;</span>
                  <span>
                    {new Date(issue.date).toLocaleDateString('ru-RU', {
                      day: 'numeric',
                      month: 'short',
                      hour: '2-digit',
                      minute: '2-digit',
                    })}
                  </span>
                </div>
              </div>
              <div className="flex gap-1.5 shrink-0">
                <button
                  onClick={() => onResolve(issue.id)}
                  className="text-xs font-medium px-3 py-1.5 rounded-lg border border-success/20 bg-success/10 text-success hover:bg-success/20 transition-colors"
                >
                  Решено
                </button>
                <button
                  onClick={() => onDelete(issue.id)}
                  className="p-1.5 rounded-lg border border-border text-muted hover:bg-muted/20 transition-colors"
                >
                  <Trash2 className="h-3.5 w-3.5" />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {resolved.length > 0 && (
        <details className="group">
          <summary className="cursor-pointer text-sm text-muted hover:text-text transition-colors">
            Решённые ({resolved.length})
          </summary>
          <div className="mt-2 space-y-2">
            {resolved.map((issue) => (
              <div
                key={issue.id}
                className="flex items-start gap-3 px-4 py-3 rounded-lg border border-border bg-background/50 opacity-60"
              >
                <CheckCircle2 className="h-4 w-4 text-success shrink-0 mt-0.5" />
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 text-xs text-muted mb-1">
                    <span>{issue.service}</span>
                    <span>&rarr;</span>
                    <span>{issue.section}</span>
                  </div>
                  <p className="text-sm text-muted line-through">{issue.comment}</p>
                  <p className="text-xs text-muted mt-1">{issue.tester}</p>
                </div>
                <button
                  onClick={() => onDelete(issue.id)}
                  className="p-1.5 rounded-lg border border-border text-muted hover:bg-muted/20 transition-colors shrink-0"
                >
                  <Trash2 className="h-3.5 w-3.5" />
                </button>
              </div>
            ))}
          </div>
        </details>
      )}
    </div>
  );
}
