'use client';

import { FlaskConical, ClipboardCheck, AlertCircle, CheckCircle2 } from 'lucide-react';
import { e2eTestGroups } from '../_data/e2e-tests';
import { manualServices } from '../_data/manual-tests';
import { useTestFeedback } from '../_hooks/useTestFeedback';
import type { TestingIssue } from '../_hooks/useTestFeedback';
import { E2ETestsSection } from './E2ETestsSection';
import { ManualTestsSection } from './ManualTestsSection';
import { IssuesSection } from './IssuesSection';

export function TestingTab() {
  const {
    feedbacks,
    issues,
    mounted,
    setFeedback,
    addIssue,
    resolveIssue,
    deleteIssue,
    clearFeedback,
  } = useTestFeedback();

  const totalE2E = e2eTestGroups.reduce((s, g) => s + g.tests.length, 0);
  const passedE2E = e2eTestGroups.reduce(
    (s, g) => s + g.tests.filter((t) => t.status === 'pass').length,
    0,
  );

  const totalManual = manualServices.reduce(
    (s, svc) => s + svc.sections.reduce((ss, sec) => ss + sec.checks.length, 0),
    0,
  );
  const manualOk = Object.values(feedbacks).filter((f) => f.status === 'ok').length;
  const openIssues = issues.filter((i) => !i.resolved).length;

  const handleOk = (checkId: string, tester: string) => {
    setFeedback(checkId, {
      status: 'ok',
      comment: '',
      tester,
      date: new Date().toISOString(),
    });
  };

  const handleIssue = (issue: Omit<TestingIssue, 'id' | 'resolved'>) => {
    const created = addIssue(issue);
    setFeedback(issue.checkId, {
      status: 'issue',
      comment: issue.comment,
      tester: issue.tester,
      date: issue.date,
    });
    return created;
  };

  if (!mounted) {
    return (
      <div className="flex items-center justify-center py-20 text-muted text-sm">
        Загрузка...
      </div>
    );
  }

  return (
    <div>
      {/* Summary cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <div className="bg-card rounded-xl p-5 shadow-sm border border-border">
          <div className="flex items-center gap-2 mb-2">
            <FlaskConical className="h-4 w-4 text-primary" />
            <span className="text-sm font-medium text-text">E2E тесты</span>
          </div>
          <p className="text-2xl font-bold text-text">{passedE2E}/{totalE2E}</p>
          <p className="text-xs text-muted mt-1">Playwright автотесты</p>
        </div>

        <div className="bg-card rounded-xl p-5 shadow-sm border border-border">
          <div className="flex items-center gap-2 mb-2">
            <ClipboardCheck className="h-4 w-4 text-primary" />
            <span className="text-sm font-medium text-text">Ручные проверки</span>
          </div>
          <p className="text-2xl font-bold text-text">{manualOk}/{totalManual}</p>
          <p className="text-xs text-muted mt-1">Проверено тестерами</p>
        </div>

        <div className="bg-card rounded-xl p-5 shadow-sm border border-border">
          <div className="flex items-center gap-2 mb-2">
            <AlertCircle className="h-4 w-4 text-error" />
            <span className="text-sm font-medium text-text">Замечания</span>
          </div>
          <p className="text-2xl font-bold text-text">{openIssues}</p>
          <p className="text-xs text-muted mt-1">Открытых замечаний</p>
        </div>

        <div className="bg-card rounded-xl p-5 shadow-sm border border-border">
          <div className="flex items-center gap-2 mb-2">
            <CheckCircle2 className="h-4 w-4 text-success" />
            <span className="text-sm font-medium text-text">Общий прогресс</span>
          </div>
          <p className="text-2xl font-bold text-text">
            {Math.round(((passedE2E + manualOk) / (totalE2E + totalManual)) * 100)}%
          </p>
          <p className="text-xs text-muted mt-1">Все тесты и проверки</p>
        </div>
      </div>

      <E2ETestsSection />

      <ManualTestsSection
        feedbacks={feedbacks}
        onOk={handleOk}
        onIssue={handleIssue}
        onClear={clearFeedback}
      />

      <IssuesSection
        issues={issues}
        onResolve={resolveIssue}
        onDelete={deleteIssue}
      />
    </div>
  );
}
