import { diffUnavailableMessage } from "./ChangeDiffSheet.jsx";
import { useI18n } from "../../shared/I18nProvider.jsx";

export function ChangesPanel({ session, files, available, selectedDiff, pending, error, onRefresh, onOpen }) {
  const { t } = useI18n();
  return <section className="panel"><div className="panel-heading"><h2>{t("changes.title")}</h2><button onClick={onRefresh} disabled={!session || Boolean(pending)}>{t("changes.refresh")}</button></div>
    {error && <p className="thread-state error" role="alert">{error}</p>}
    <div className="file-list">{files.map((file) => <button className="file-row" key={file.path} disabled={Boolean(pending)} onClick={() => onOpen(file)}><span>{file.path}</span><strong>{file.status}</strong><small>+{file.additions} -{file.deletions}</small></button>)}{!available && <p>{t("changes.notRepository")}</p>}{available && files.length === 0 && <p>{t("changes.empty")}</p>}</div>
    {selectedDiff && <section className="diff-view" aria-label={t("changes.diffFor", { path: selectedDiff.path })}><h3>{selectedDiff.path}</h3>{selectedDiff.unavailableReason ? <p>{diffUnavailableMessage(selectedDiff.unavailableReason, t)}</p> : <pre>{selectedDiff.lines.map((line) => <span className={`diff-line ${line.kind}`} key={line.id}>{line.text}{"\n"}</span>)}</pre>}</section>}
  </section>;
}
