PS_ProserveReport/PS_Report/src/pages/SessionDetail.tsx

import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Card from 'react-bootstrap/Card';
import Badge from 'react-bootstrap/Badge';
import Form from 'react-bootstrap/Form';
import ProgressBar from 'react-bootstrap/ProgressBar';
import { getSession, getUsersInSession, getDebrief, getObjectives, getSessionStats } from '../api/client';
import type { Session, User, DebriefRow, Participation, ObjectiveResults, SessionDebriefRow } from '../types';
import { SessionType } from '../types';
import SessionTypeBadge from '../components/SessionTypeBadge';
import ScoreBadge from '../components/ScoreBadge';
import StatCard from '../components/StatCard';
import LoadingSpinner from '../components/LoadingSpinner';
import PrintHeader from '../components/PrintHeader';
import { Tooltip, ResponsiveContainer, Legend, LineChart, Line, XAxis, YAxis, CartesianGrid, BarChart, Bar } from 'recharts';
import { useI18n } from '../i18n/context';
import type { TranslationKey } from '../i18n/translations';
import TargetVisualization from '../components/TargetVisualization';
import { computeSuccess } from '../hooks/useComputedSuccess';

function formatDuration(seconds: number): string {
  const m = Math.floor(seconds / 60);
  const s = Math.floor(seconds % 60);
  return `${m}m ${s}s`;
}

function formatDate(dateStr: string, lang: string): string {
  if (!dateStr) return '-';
  const d = new Date(dateStr);
  return d.toLocaleDateString(lang === 'fr' ? 'fr-FR' : 'en-US', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
}


function SessionDetail() {
  const { id } = useParams<{ id: string }>();
  const sessionId = Number(id);
  const { t, lang } = useI18n();

  const [session, setSession] = useState<Session | null>(null);
  const [users, setUsers] = useState<User[]>([]);
  const [debrief, setDebrief] = useState<DebriefRow[]>([]);
  const [objectives, setObjectives] = useState<Participation | null>(null);
  const [shotDetails, setShotDetails] = useState<SessionDebriefRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedUserId, setSelectedUserId] = useState<number>(-1);

  useEffect(() => {
    if (!sessionId) return;

    Promise.all([
      getSession(sessionId).catch(() => null),
      getUsersInSession(sessionId).catch(() => []),
      getDebrief(sessionId).catch(() => []),
      getObjectives(sessionId).catch(() => null),
    ])
      .then(([sessionData, usersData, debriefData, objectivesData]) => {
        setSession(sessionData as Session | null);
        const uList = usersData as User[];
        setUsers(uList);
        if (uList.length === 1) setSelectedUserId(uList[0].id);
        setDebrief(debriefData as DebriefRow[]);
        setObjectives(objectivesData as Participation | null);

        // Load shot details for all session types
        if (sessionData) {
          getSessionStats(sessionId, -1, sessionData.sessionTypeAsInt).then(setShotDetails);
        }
      })
      .finally(() => setLoading(false));
  }, [sessionId]);

  if (loading) return <LoadingSpinner />;
  if (!session) return <p className="text-center text-muted-custom py-5">{t('session.notFound')}</p>;

  // Parse objectives
  let parsedObjectives: ObjectiveResults | null = null;
  if (objectives?.resultsAsString) {
    try {
      parsedObjectives = JSON.parse(objectives.resultsAsString);
    } catch {
      // ignore parse errors
    }
  }

  // Map userId to username
  const userMap = new Map(users.map((u) => [u.id, u]));

  const isFireRange = session.sessionTypeAsInt === SessionType.FireRange
    || session.sessionTypeAsInt === SessionType.Challenge
    || session.sessionTypeAsInt === SessionType.LongRange;
  const isChallenge = session.sessionTypeAsInt === SessionType.Challenge;

  const computedSuccess = computeSuccess(session.success, debrief);

  return (
    <>
      <PrintHeader subtitle={session.sessionName || session.scenarioName || `Session #${session.id}`} />

      <div className="d-flex justify-content-between align-items-center mb-3">
        <Link to="/sessions" className="text-muted-custom no-print">&larr; {t('session.backToSessions')}</Link>
        <button className="print-btn no-print" onClick={() => window.print()}>
          {t('print.btn')}
        </button>
      </div>

      {/* Session Header */}
      <Card className="data-card mb-4">
        <Card.Body>
          <Row className="align-items-start">
            <Col>
              <h3 className="mb-2">
                {session.sessionName || session.scenarioName || `Session #${session.id}`}
              </h3>
              <div className="d-flex align-items-center gap-3">
                <SessionTypeBadge typeId={session.sessionTypeAsInt} />
                <div>
                  <div className="text-muted-custom">{formatDate(session.sessionDateAsString, lang)}    Map: {session.mapName || '-'}</div>
                  <div className="text-muted-custom">Scenario: {session.scenarioName || '-'}</div>
                </div>
              </div>
            </Col>
            {users.length > 0 && (
              <Col xs="auto" style={{ minWidth: 200 }}>
                <h3 className="mb-2">{t('session.participants')}</h3>
                <Form.Select
                  size="sm"
                  value={selectedUserId}
                  onChange={e => setSelectedUserId(Number(e.target.value))}
                  style={{ backgroundColor: '#1a1a2e', color: '#e0e0e0', borderColor: '#333' }}
                >
                  <option value={-1}>{t('session.global')}</option>
                  {users.map(u => (
                    <option key={u.id} value={u.id}>
                      {u.firstName && u.lastName ? `${u.firstName} ${u.lastName}` : u.username}
                    </option>
                  ))}
                </Form.Select>
              </Col>
            )}
            <Col className="flex-grow-1" />
            <Col xs="auto" className="align-self-center">
              <ScoreBadge success={computedSuccess} />
            </Col>
          </Row>
        </Card.Body>
      </Card>

      {/* Standard sessions: stats left + bar chart right */}
      {!isFireRange && (() => {
        // Compute filtered debrief stats
        const filteredDebrief = selectedUserId === -1
          ? debrief
          : debrief.filter(r => r.userId === selectedUserId);
        const sumField = (field: keyof DebriefRow) =>
          filteredDebrief.reduce((sum, r) => sum + (Number(r[field]) || 0), 0);
        const avgPrecision = filteredDebrief.length > 0
          ? filteredDebrief.reduce((sum, r) => sum + (r.averagePrecision || 0), 0) / filteredDebrief.length
          : 0;

        // Bar chart data: per participant
        const barData = debrief.map(row => {
          const user = userMap.get(row.userId);
          const name = user ? (user.firstName || user.username) : `#${row.userId}`;
          return {
            name,
            [t('hitType.enemy')]: row.nbEnemyHitsByUser,
            [t('hitType.civilian')]: row.nbCivilHitsByUser,
            [t('hitType.police')]: row.nbPoliceHitsByUser,
            [t('session.missed')]: row.nbMissedShotsByUser,
          };
        });

        return (
          <Row className="mb-4 g-3 align-items-stretch">
            {/* Col 1: KPIs */}
            <Col lg={2} className="d-flex">
              <div className="d-flex flex-column justify-content-between flex-grow-1" style={{ gap: '0.5rem' }}>
                <Card className="data-card flex-grow-1">
                  <Card.Body className="py-3 px-3 d-flex flex-column justify-content-center text-center">
                    <div style={{ fontSize: '0.9rem', color: '#999' }}>{t('session.duration')}</div>
                    <div style={{ fontSize: '1.6rem', fontWeight: 'bold' }}>{formatDuration(session.timeToFinish)}</div>
                  </Card.Body>
                </Card>
                <Card className="data-card flex-grow-1">
                  <Card.Body className="py-3 px-3 d-flex flex-column justify-content-center text-center">
                    <div style={{ fontSize: '0.9rem', color: '#999' }}>{t('firerange.shotsFired')}</div>
                    <div style={{ fontSize: '1.6rem', fontWeight: 'bold' }}>{sumField('nbFiredShotsByUser')}</div>
                  </Card.Body>
                </Card>
                <Card className="data-card flex-grow-1">
                  <Card.Body className="py-3 px-3 d-flex flex-column justify-content-center text-center">
                    <div style={{ fontSize: '0.9rem', color: '#999' }}>{t('firerange.shotsMissed')}</div>
                    <div style={{ fontSize: '1.6rem', fontWeight: 'bold' }}>{sumField('nbMissedShotsByUser')}</div>
                  </Card.Body>
                </Card>
                <Card className="data-card flex-grow-1">
                  <Card.Body className="py-3 px-3 d-flex flex-column justify-content-center text-center">
                    <div style={{ fontSize: '0.9rem', color: '#999' }}>{t('firerange.avgPrecision')}</div>
                    <div style={{ fontSize: '1.6rem', fontWeight: 'bold' }}>{avgPrecision > 0 ? `${(avgPrecision * 100).toFixed(2)}%` : '-'}</div>
                  </Card.Body>
                </Card>
              </div>
            </Col>

            {/* Col 2: Global Stats + Personal Stats */}
            <Col lg={3} className="d-flex">
              <div className="d-flex flex-column justify-content-between flex-grow-1">
                <Card className="data-card mb-2 flex-grow-1">
                  <Card.Body className="py-2 px-3">
                    <h6 className="mb-2" style={{ fontSize: '0.95rem' }}>{t('session.globalStats')}</h6>
                    <table className="w-100" style={{ fontSize: '0.9rem' }}>
                      <tbody>
                        <tr><td className="py-1" style={{ color: '#27ae60' }}>{t('stats.enemiesKilled')}</td><td className="text-end fw-bold">{sumField('totalEnemyKilled')}</td></tr>
                        <tr><td className="py-1" style={{ color: '#e74c3c' }}>{t('stats.civiliansKilled')}</td><td className="text-end fw-bold">{sumField('totalCivilKilled')}</td></tr>
                        <tr><td className="py-1" style={{ color: '#1abc9c' }}>{t('stats.policeKilled')}</td><td className="text-end fw-bold">{sumField('totalPoliceKilled')}</td></tr>
                        <tr><td className="py-1" style={{ color: '#f39c12' }}>{t('session.hitsReceived')}</td><td className="text-end fw-bold">{sumField('nbReceivedHitsFromEnemyIA') + sumField('nbReceivedHitsFromEnemyUser') + sumField('nbReceivedHitsFromPoliceUser')}</td></tr>
                      </tbody>
                    </table>
                  </Card.Body>
                </Card>

                <Card className="data-card flex-grow-1">
                  <Card.Body className="py-2 px-3">
                    <h6 className="mb-2" style={{ fontSize: '0.95rem' }}>{t('session.personalStats')}</h6>
                    <table className="w-100" style={{ fontSize: '0.9rem' }}>
                      <tbody>
                        <tr><td className="py-1" style={{ color: '#27ae60' }}>{t('session.enemiesHit')}</td><td className="text-end fw-bold">{sumField('nbEnemyHitsByUser')}</td></tr>
                        <tr><td className="py-1" style={{ color: '#e74c3c' }}>{t('session.civiliansHit')}</td><td className="text-end fw-bold">{sumField('nbCivilHitsByUser')}</td></tr>
                        <tr><td className="py-1" style={{ color: '#1abc9c' }}>{t('session.friendlyFire')}</td><td className="text-end fw-bold">{sumField('nbPoliceHitsByUser')}</td></tr>
                        <tr><td className="py-1" style={{ color: '#f39c12' }}>{t('session.hitsReceived')}</td><td className="text-end fw-bold">{sumField('nbReceivedHitsFromEnemyIA') + sumField('nbReceivedHitsFromEnemyUser') + sumField('nbReceivedHitsFromPoliceUser')}</td></tr>
                      </tbody>
                    </table>
                  </Card.Body>
                </Card>
              </div>
            </Col>

            {/* Col 3: Bar chart */}
            <Col lg={7} className="d-flex">
              <Card className="data-card flex-grow-1">
                <Card.Body className="d-flex flex-column">
                  <Card.Title className="text-center">{t('session.shotsInSession')}</Card.Title>
                  <div className="d-flex flex-grow-1 align-items-center">
                    <ResponsiveContainer width="100%" height={350}>
                      <BarChart data={barData} margin={{ top: 10, right: 20, left: 10, bottom: 5 }}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#333" />
                        <XAxis dataKey="name" stroke="#999" tick={false} />
                        <YAxis stroke="#999" />
                        <Tooltip contentStyle={{ backgroundColor: '#1a1a2e', border: '1px solid #333' }} />
                        <Legend />
                        <Bar dataKey={t('hitType.enemy')} fill="#ff6b8a" />
                        <Bar dataKey={t('hitType.civilian')} fill="#f39c12" />
                        <Bar dataKey={t('hitType.police')} fill="#1abc9c" />
                        <Bar dataKey={t('session.missed')} fill="#ff9ec4" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </Card.Body>
              </Card>
            </Col>
          </Row>
        );
      })()}

      {/* FireRange / Challenge / LongRange - KPIs left + Chart/Target right */}
      {isFireRange && shotDetails.length > 0 && (() => {
        // Handle both PascalCase (API) and camelCase (TS interface) property names
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const getVal = (shot: any, ...keys: string[]): number => {
          for (const k of keys) { if (shot[k] != null) return shot[k] as number; }
          return 0;
        };

        const hitsOnly = shotDetails.filter(s => getVal(s, 'ReactId', 'reactId') >= 0);
        const missedCount = shotDetails.filter(s => getVal(s, 'ReactId', 'reactId') < 0).length;
        const avgPrecisionStr = (() => {
          if (hitsOnly.length === 0) return '-';
          const avg = hitsOnly.reduce((sum, s) => sum + getVal(s, 'HitPrecision', 'hitPrecision'), 0) / hitsOnly.length;
          return `${(avg * 100).toFixed(1)}%`;
        })();
        const avgReactionStr = (() => {
          const withReaction = shotDetails.filter(s => getVal(s, 'ReactionTime', 'reactionTime') > 0);
          if (withReaction.length === 0) return '-';
          const avg = withReaction.reduce((sum, s) => sum + getVal(s, 'ReactionTime', 'reactionTime'), 0) / withReaction.length;
          return `${(avg / 1000).toFixed(3)} s`;
        })();

        // Precision chart data
        const precisionData = shotDetails.map(s => ({
          shot: getVal(s, 'ShotIndex', 'shotIndex'),
          precision: getVal(s, 'ReactId', 'reactId') >= 0
            ? Math.round(getVal(s, 'HitPrecision', 'hitPrecision') * 100)
            : 0,
        }));

        // Reaction time chart data (for Challenge)
        const reactionData = hitsOnly
          .filter(s => getVal(s, 'ReactionTime', 'reactionTime') > 0)
          .map(s => ({
            shot: getVal(s, 'ShotIndex', 'shotIndex'),
            reaction: Math.round(getVal(s, 'ReactionTime', 'reactionTime')),
          }));

        // Target hit positions (only shots that hit)
        const targetShots = hitsOnly.map(s => ({
          index: getVal(s, 'ShotIndex', 'shotIndex'),
          x: getVal(s, 'HitLocationX', 'hitLocationX'),
          y: getVal(s, 'HitLocationY', 'hitLocationY'),
          precision: getVal(s, 'HitPrecision', 'hitPrecision'),
        }));

        return (
          <Row className="mb-4 g-3">
            {/* Left: KPI cards vertical */}
            <Col lg={3}>
              <Row className="g-3">
                <Col xs={6} lg={isChallenge ? 6 : 12}>
                  <StatCard title={t('session.duration')} value={formatDuration(session.timeToFinish)} color="#9b59b6" />
                </Col>
                <Col xs={6} lg={isChallenge ? 6 : 12}>
                  <StatCard title={t('firerange.shotsFired')} value={shotDetails.length} color="#1abc9c" />
                </Col>
                {isChallenge && (
                  <Col xs={6} lg={6}>
                    <StatCard title={t('firerange.targetsHit')} value={hitsOnly.length} color="#4a90d9" />
                  </Col>
                )}
                <Col xs={6} lg={isChallenge ? 6 : 12}>
                  <StatCard title={t('firerange.shotsMissed')} value={missedCount} color="#e74c3c" />
                </Col>
                <Col xs={6} lg={isChallenge ? 6 : 12}>
                  <StatCard title={t('firerange.avgPrecision')} value={avgPrecisionStr} color="#27ae60" />
                </Col>
                {isChallenge && (
                  <Col xs={6} lg={6}>
                    <StatCard title={t('firerange.avgReaction')} value={avgReactionStr} color="#f39c12" />
                  </Col>
                )}
              </Row>
            </Col>

            {/* Middle: Target (not for Challenge) */}
            {!isChallenge && (
              <Col lg={4}>
                <Card className="data-card h-100">
                  <Card.Body className="d-flex flex-column">
                    <Card.Title className="text-center">{t('firerange.targetView')}</Card.Title>
                    <div className="d-flex flex-grow-1 align-items-center justify-content-center">
                      <TargetVisualization shots={targetShots} variant={session.sessionTypeAsInt === SessionType.LongRange ? 'longRange' : 'human'} />
                    </div>
                  </Card.Body>
                </Card>
              </Col>
            )}

            {/* Right: Chart */}
            <Col lg={isChallenge ? 9 : 5}>
              <Card className="data-card h-100">
                <Card.Body className="d-flex flex-column">
                  <Card.Title className="text-center">
                    {isChallenge ? t('firerange.reactionChart') : t('firerange.precisionChart')}
                  </Card.Title>
                  <div className="d-flex flex-grow-1 align-items-center">
                  {isChallenge ? (
                    <ResponsiveContainer width="100%" height={250}>
                      <LineChart data={reactionData} margin={{ top: 10, right: 20, left: 10, bottom: 5 }}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#333" />
                        <XAxis dataKey="shot" stroke="#999" />
                        <YAxis stroke="#999" width={50} tickFormatter={v => `${v}`} />
                        <Tooltip
                          contentStyle={{ backgroundColor: '#1a1a2e', border: '1px solid #333' }}
                          formatter={(value: number) => [`${value} ms`, t('chart.reactionTime')]}
                        />
                        <Line
                          type="linear"
                          dataKey="reaction"
                          stroke="#f39c12"
                          strokeWidth={2}
                          dot={{ fill: '#f39c12', r: 4 }}
                          activeDot={{ r: 6 }}
                        />
                      </LineChart>
                    </ResponsiveContainer>
                  ) : (
                    <ResponsiveContainer width="100%" height={250}>
                      <LineChart data={precisionData} margin={{ top: 10, right: 20, left: 10, bottom: 5 }}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#333" />
                        <XAxis dataKey="shot" stroke="#999" />
                        <YAxis domain={[0, 100]} stroke="#999" width={50} tickFormatter={v => `${v}`} />
                        <Tooltip
                          contentStyle={{ backgroundColor: '#1a1a2e', border: '1px solid #333' }}
                          formatter={(value: number) => [`${value}%`, t('chart.precision')]}
                        />
                        <Line
                          type="linear"
                          dataKey="precision"
                          stroke="#ff6b8a"
                          strokeWidth={2}
                          dot={{ fill: '#ff6b8a', r: 4 }}
                          activeDot={{ r: 6 }}
                        />
                      </LineChart>
                    </ResponsiveContainer>
                  )}
                  </div>
                </Card.Body>
              </Card>
            </Col>
          </Row>
        );
      })()}

      {/* Objectives (hidden for FireRange/Challenge) */}
      {parsedObjectives && !isFireRange && (
        <Row className="mb-4 g-3">
          <Col md={12}>
            <Card className="data-card">
              <Card.Body>
                <Card.Title>{t('session.objectives')}</Card.Title>
                {Object.entries(parsedObjectives).map(([key, obj]) => {
                  if (!obj || typeof obj !== 'object') return null;
                  const pct = obj.maxScore > 0 ? (obj.score / obj.maxScore) * 100 : 0;
                  return (
                    <div key={key} className="mb-3">
                      <div className="d-flex justify-content-between mb-1">
                        <span>{t(`obj.${key}` as TranslationKey)}</span>
                        <span>
                          {obj.score}/{obj.maxScore}
                          {obj.success !== undefined && (
                            <Badge bg={obj.success ? 'success' : 'danger'} className="ms-2">
                              {obj.success ? 'OK' : 'X'}
                            </Badge>
                          )}
                        </span>
                      </div>
                      <ProgressBar
                        now={pct}
                        variant={obj.success ? 'success' : 'danger'}
                        className="objective-bar"
                      />
                    </div>
                  );
                })}
              </Card.Body>
            </Card>
          </Col>
        </Row>
      )}
    </>
  );
}

export default SessionDetail;