'use client';

import { useState } from 'react';
import { CheckCircle2, ChevronDown, ChevronRight, FlaskConical } from 'lucide-react';
import { e2eTestGroups } from '../_data/e2e-tests';

export function E2ETestsSection() {
  const [expanded, setExpanded] = useState<string | null>(null);
  const totalTests = e2eTestGroups.reduce((s, g) => s + g.tests.length, 0);
  const passedTests = e2eTestGroups.reduce(
    (s, g) => s + g.tests.filter((t) => t.status === 'pass').length,
    0,
  );

  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">
          <FlaskConical className="h-5 w-5 text-primary" />
          <h2 className="text-lg font-semibold text-text">
            Автоматические E2E тесты (Playwright)
          </h2>
        </div>
        <span className="text-sm font-medium text-success bg-success/10 px-3 py-1 rounded-full">
          {passedTests}/{totalTests} пройдено
        </span>
      </div>

      <div className="space-y-2">
        {e2eTestGroups.map((group) => {
          const key = `${group.file}-${group.groupName}`;
          const isOpen = expanded === key;
          const passed = group.tests.filter((t) => t.status === 'pass').length;
          const allPassed = passed === group.tests.length;

          return (
            <div key={key} className="border border-border rounded-lg overflow-hidden">
              <button
                onClick={() => setExpanded(isOpen ? null : key)}
                className="w-full flex items-center gap-3 px-4 py-3 hover:bg-background transition-colors"
              >
                {isOpen ? (
                  <ChevronDown className="h-4 w-4 text-muted shrink-0" />
                ) : (
                  <ChevronRight className="h-4 w-4 text-muted shrink-0" />
                )}
                <span className="text-sm font-medium text-text flex-1 text-left">
                  {group.groupName}
                </span>
                <span className="text-xs text-muted mr-2">{group.file}</span>
                <span
                  className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
                    allPassed
                      ? 'bg-success/10 text-success'
                      : 'bg-warning/10 text-warning'
                  }`}
                >
                  {passed}/{group.tests.length}
                </span>
              </button>
              {isOpen && (
                <div className="px-4 pb-3 border-t border-border/50">
                  <ul className="mt-2 space-y-2">
                    {group.tests.map((test) => (
                      <li key={test.id} className="flex items-start gap-2 text-sm">
                        <CheckCircle2
                          className={`h-4 w-4 shrink-0 mt-0.5 ${
                            test.status === 'pass'
                              ? 'text-success'
                              : test.status === 'fail'
                                ? 'text-error'
                                : 'text-muted'
                          }`}
                        />
                        <div>
                          <p className="text-text">{test.description}</p>
                          <p className="text-xs text-muted mt-0.5">
                            Ожидается: {test.expectedResult}
                          </p>
                        </div>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}
