import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { ArrowLeft, ShieldCheck } from "lucide-react";
import { getVersion } from "@tauri-apps/api/app";
import { APP_NAME } from "../../shared/constants";
import UpdateCard from "../../components/settings/UpdateCard";
import ChangelogContent from "../../components/settings/ChangelogContent";
import LogViewerCard from "../../components/settings/LogViewerCard";

export default function SystemsSettingsPage() {
  const { t } = useTranslation();
  const [version, setVersion] = useState("");

  useEffect(() => {
    getVersion().then(setVersion);
  }, []);

  return (
    <div className="space-y-6">
      <Link
        to="/settings"
        className="inline-flex items-center gap-2 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
      >
        <ArrowLeft size={16} />
        {t("settings.backToHome")}
      </Link>

      <h1 className="text-2xl font-bold">{t("settings.systems.title")}</h1>

      <section className="space-y-3">
        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
          {t("settings.systems.sections.version")}
        </h2>
        <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-xl bg-[var(--primary)] flex items-center justify-center text-white font-bold text-lg">
              S
            </div>
            <div>
              <h3 className="text-lg font-semibold">{APP_NAME}</h3>
              <p className="text-sm text-[var(--muted-foreground)]">
                {t("settings.version", { version })}
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="space-y-3">
        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
          {t("settings.systems.sections.update")}
        </h2>
        <UpdateCard />
      </section>

      <section className="space-y-3">
        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
          {t("settings.systems.sections.changelog")}
        </h2>
        <ChangelogContent />
      </section>

      <section className="space-y-3">
        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
          {t("settings.systems.sections.logs")}
        </h2>
        <LogViewerCard />
      </section>

      <div className="flex items-start gap-2 text-sm text-[var(--muted-foreground)]">
        <ShieldCheck size={16} className="mt-0.5 shrink-0" />
        <p>{t("settings.dataSafeNotice")}</p>
      </div>
    </div>
  );
}