frontend/src/components/TuningPanel.js

import { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, Cell, ResponsiveContainer } from 'recharts';

export default function TuningPanel({
    tuningResult,
    tuning,
    loading,
    bestSize,
    setBestSize,
    onRun,
}) {
    const [showFormula, setShowFormula] = useState(false);

    const best = tuningResult?.reduce((prev, curr) =>
        curr.silhouette_score > prev.silhouette_score ? curr : prev
    );

    const CustomTooltip = ({ active, payload }) => {
        if (!active || !payload?.length) return null;
        const d = payload[0].payload;
        return (
            <div className="tooltip-box">
                <div style={{ color: 'var(--accent)', marginBottom: 4 }}>
                    min_cluster_size = {d.min_cluster_size}
                </div>
                <div>Clusters: {d.n_clusters}</div>
                <div>Noise points: {d.n_noise}</div>
                <div>Silhouette: {d.silhouette_score}</div>
                {d.min_cluster_size === best?.min_cluster_size && (
                    <div style={{ color: 'var(--low)', marginTop: 4 }}>★ Best</div>
                )}
            </div>
        );
    };

    return (
        <div className="panel fade-in">
            <div className="panel-header">
                <span className="panel-title">CLUSTER SIZE TUNING</span>
                <div className="panel-actions">
                    <button
                        className="btn-ghost"
                        onClick={() => setShowFormula(!showFormula)}
                    >
                        {showFormula ? 'Hide Formula' : 'Silhouette Formula'}
                    </button>
                </div>
            </div>

            {showFormula && (
                <div className="formula-box">
                    <div className="formula-title">SILHOUETTE SCORE — s(i)</div>
                    <div className="formula">
                        s(i) = ( b(i) − a(i) ) / max( a(i), b(i) )
                    </div>
                    <div className="formula-legend">
                        <div className="formula-item">
                            <span className="formula-var">a(i)</span>
                            <span className="formula-desc">mean distance from point i to all other points in its own cluster — measures cohesion. Lower = tighter cluster.</span>
                        </div>
                        <div className="formula-item">
                            <span className="formula-var">b(i)</span>
                            <span className="formula-desc">mean distance from point i to all points in the nearest other cluster — measures separation. Higher = more distinct clusters.</span>
                        </div>
                        <div className="formula-item">
                            <span className="formula-var">s → +1</span>
                            <span className="formula-desc">point is well inside its cluster, far from others. Good.</span>
                        </div>
                        <div className="formula-item">
                            <span className="formula-var">s → 0</span>
                            <span className="formula-desc">point is on the boundary between two clusters. Ambiguous.</span>
                        </div>
                        <div className="formula-item">
                            <span className="formula-var">s → -1</span>
                            <span className="formula-desc">point is closer to another cluster than its own. Misclassified.</span>
                        </div>
                    </div>
                </div>
            )}

            {tuning && (
                <div style={{ padding: '16px', color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
                    Testing cluster sizes 2, 3, 5, 8, 10, 15, 20, 30...
                </div>
            )}

            {tuningResult && !tuning && (
                <div className="tuning-results">
                    <div className="tuning-best">
                        <span className="tuning-best-label">BEST SIZE</span>
                        <input
                            type="number"
                            className="setting-input"
                            value={bestSize ?? ''}
                            min={2}
                            max={50}
                            onChange={e => setBestSize(Number(e.target.value))}
                            style={{ width: 64, textAlign: 'center' }}
                        />
                        <span className="tuning-best-meta">
                            {best.n_clusters} clusters · {best.n_noise} noise · silhouette {best.silhouette_score}
                        </span>
                        <button
                            className="btn-primary"
                            onClick={onRun}
                            disabled={loading || bestSize == null}
                            style={{ marginLeft: 'auto' }}
                        >
                            {loading ? 'Running...' : 'Run Clustering'}
                        </button>
                    </div>

                    <ResponsiveContainer width="100%" height={200}>
                        <BarChart
                            data={tuningResult}
                            margin={{ top: 8, right: 24, bottom: 8, left: 0 }}
                        >
                            <XAxis
                                dataKey="min_cluster_size"
                                tick={{ fill: 'var(--text-dim)', fontSize: 10, fontFamily: 'var(--font-mono)' }}
                                axisLine={{ stroke: 'var(--border)' }}
                                tickLine={false}
                                label={{ value: 'min_cluster_size', position: 'insideBottom', offset: -4, fill: 'var(--text-dim)', fontSize: 9 }}
                            />
                            <YAxis
                                domain={[0, 1]}
                                tick={{ fill: 'var(--text-dim)', fontSize: 10, fontFamily: 'var(--font-mono)' }}
                                axisLine={{ stroke: 'var(--border)' }}
                                tickLine={false}
                                label={{ value: 'silhouette', angle: -90, position: 'insideLeft', fill: 'var(--text-dim)', fontSize: 9 }}
                            />
                            <Tooltip content={<CustomTooltip />} />
                            <Bar dataKey="silhouette_score" radius={[3, 3, 0, 0]}>
                                {tuningResult.map((entry, i) => (
                                    <Cell
                                        key={i}
                                        fill={entry.min_cluster_size === best.min_cluster_size
                                            ? 'var(--low)'
                                            : 'var(--bg-3)'}
                                        stroke={entry.min_cluster_size === best.min_cluster_size
                                            ? 'var(--low)'
                                            : 'var(--border)'}
                                        strokeWidth={1}
                                    />
                                ))}
                            </Bar>
                        </BarChart>
                    </ResponsiveContainer>

                    <div className="tuning-table">
                        <div className="tuning-row tuning-header">
                            <span>SIZE</span>
                            <span>CLUSTERS</span>
                            <span>NOISE</span>
                            <span>SILHOUETTE</span>
                        </div>
                        {tuningResult.map(r => (
                            <div
                                key={r.min_cluster_size}
                                className="tuning-row"
                                style={{
                                    background: r.min_cluster_size === best.min_cluster_size
                                        ? 'rgba(34, 197, 94, 0.05)'
                                        : 'transparent',
                                    borderLeft: r.min_cluster_size === best.min_cluster_size
                                        ? '2px solid var(--low)'
                                        : '2px solid transparent',
                                }}
                            >
                                <span style={{ color: r.min_cluster_size === best.min_cluster_size ? 'var(--low)' : 'var(--text)' }}>
                                    {r.min_cluster_size}
                                    {r.min_cluster_size === best.min_cluster_size && ' ★'}
                                </span>
                                <span>{r.n_clusters}</span>
                                <span>{r.n_noise}</span>
                                <span>{r.silhouette_score}</span>
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}