import React from "react";
import { createRoot } from "react-dom/client";
import { Info, Loader } from "lucide-react";

import { LocaleProvider, useLocale } from "./hooks/useLocale.js";
import { useTheme } from "./hooks/useTheme.js";
import { useProtection } from "./hooks/useProtection.js";

import { Header } from "./components/Header.jsx";
import { UploadZone } from "./components/UploadZone.jsx";
import { ImageComparator } from "./components/ImageComparator.jsx";
import { ControlPanel } from "./components/ControlPanel.jsx";
import { MetricsBar } from "./components/MetricsBar.jsx";
import { DonateSection } from "./components/DonateSection.jsx";
import { Footer } from "./components/Footer.jsx";
import { FeatureBand } from "./components/FeatureBand.jsx";

import "./styles.css";

function App() {
  const { theme, toggleTheme } = useTheme();
  const protection = useProtection();

  return (
    <LocaleProvider>
      <div className="app">
        <Header theme={theme} onToggleTheme={toggleTheme} />

        <main className="workspace">
          <PreviewPanel protection={protection} />
          <ControlPanel protection={protection} />
        </main>

        <FeatureBand />
        <DonateSection />
        <Footer />
      </div>
    </LocaleProvider>
  );
}

function PreviewPanel({ protection }) {
  const { t } = useLocale();
  const {
    sourceImageData,
    protectedImageData,
    aiViewImageData,
    hasImage,
    compare,
    setCompare,
    metrics,
    isProcessing,
    loadFiles
  } = protection;

  return (
    <section className="panel" aria-label={t.compareTitle}>
      <div className="preview-header">
        <div>
          <h2>{t.compareTitle}</h2>
          <p>{hasImage ? t.compareHint : t.uploadHint}</p>
        </div>
        {isProcessing && (
          <span className="processing-badge">
            <Loader size={12} />
            {t.processing}
          </span>
        )}
      </div>

      {hasImage && (
        <div className="compare-bar">
          <span>{t.humanView}</span>
          <input
            type="range"
            min="0"
            max="100"
            value={compare}
            onChange={(e) => setCompare(Number(e.target.value))}
          />
          <span>{t.aiView}</span>
        </div>
      )}

      <div className="preview-canvas-area">
        {hasImage ? (
          <ImageComparator
            source={sourceImageData}
            aiViewImage={aiViewImageData}
            compare={compare}
            onCompareChange={setCompare}
          />
        ) : (
          <UploadZone onFiles={loadFiles} />
        )}
      </div>

      <MetricsBar metrics={metrics} />

      <div className="note-line">
        <Info size={14} />
        <span>{t.honestNote}</span>
      </div>
    </section>
  );
}

createRoot(document.getElementById("root")).render(<App />);