// src/ModelOverview.jsx

import React, { useEffect, useState } from "react";
import LmStats from "./LmStats";

export default function ModelOverview({ onBackToChat }) {
  const [defaultModel, setDefaultModel] = useState("");
  const [modelInfo, setModelInfo] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [loading, setLoading] = useState(false);
  const [showStats, setShowStats] = useState(false); // 👈 nuovo stato toggle

  const fetchModelData = async () => {
    setLoading(true);
    try {
      const [defaultRes, infoRes] = await Promise.all([
        fetch("/v1/default-model"),
        fetch("/v1/models-info")
      ]);
      const defaultText = await defaultRes.text();
      const infoJson = await infoRes.json();
      setDefaultModel(defaultText);
      setModelInfo(Array.isArray(infoJson) ? infoJson : []);
    } catch (err) {
      console.error("Errore nel caricamento modelli", err);
    } finally {
      setLoading(false);
    }
  };

  const updateModelData = async () => {
    setLoading(true);
    try {
      const res = await fetch("/v1/models-info/update", { method: "POST" });
      if (res.ok) {
        const updated = await res.json();
        setModelInfo(Array.isArray(updated) ? updated : []);
      }
    } catch (err) {
      console.error("Errore nell'aggiornamento modelli", err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchModelData();
  }, []);

  const filteredModels = modelInfo.filter((model) =>
    model.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="container py-4">
      <div className="bg-light p-4 rounded shadow-sm mb-4">
        <h3 className="mb-0">📌 Modello di default</h3>
        <p className="lead text-muted mb-0">
          {defaultModel || "Non disponibile"}
        </p>
      </div>

      <div className="d-flex justify-content-between align-items-center mb-3">
        <div className="btn-group">
          <button className="btn btn-outline-primary" onClick={onBackToChat}>
            ⬅ Torna alla chat
          </button>
          <button className="btn btn-outline-success" onClick={updateModelData}>
            🔄 Aggiorna dati modelli
          </button>
        </div>
        <div>
          <button
            className={`btn ${showStats ? "btn-secondary" : "btn-outline-secondary"}`}
            onClick={() => setShowStats(prev => !prev)}
          >
            {showStats ? "📋 Mostra elenco modelli" : "📊 Mostra statistiche"}
          </button>
        </div>
      </div>

      {showStats ? (
        <LmStats />
      ) : (
        <>
          <div className="mb-3">
            <input
              type="text"
              className="form-control"
              placeholder="🔍 Cerca modello per nome..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>

          <div className="table-responsive">
            <table className="table table-bordered table-hover align-middle">
              <thead className="table-light">
                <tr>
                  <th>Nome</th>
                  <th>Descrizione</th>
                  <th>Caratteristiche</th>
                </tr>
              </thead>
              <tbody>
                {loading && (
                  <tr>
                    <td colSpan="3" className="text-center">Caricamento…</td>
                  </tr>
                )}
                {!loading && filteredModels.length === 0 && (
                  <tr>
                    <td colSpan="3" className="text-center">Nessun modello trovato</td>
                  </tr>
                )}
                {!loading && filteredModels.map((model) => (
                  <tr key={model.name}>
                    <td>{model.name}</td>
                    <td>{model.description || "—"}</td>
                    <td>
                      <ul className="mb-0 small">
                        {Array.isArray(model.features) && model.features.length > 0
                          ? model.features.map((f, i) => <li key={i}>{f}</li>)
                          : <li>—</li>}
                      </ul>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}
    </div>
  );
}