"use client";

import { FormEvent, useState } from "react";
import { ReportView } from "./report-view";
import { demoInspection } from "@/lib/inspect/demo";
import { isInspectionResult } from "@/lib/inspect/validation";
import type { InspectionResult } from "@/lib/inspect/types";
import { CERTSCOPE_VERSION } from "@/lib/version";

type ReportSource = "demo" | "live";
type ActiveReport = { result: InspectionResult; source: ReportSource };
type RequestState =
  | { status: "idle" | "success" }
  | { status: "loading"; requestedHost: string }
  | { status: "error"; requestedHost: string; message: string };

function ShieldLogo() {
  return <svg viewBox="0 0 32 36" aria-hidden="true"><path d="M16 1.5 29 6v10.2c0 8.2-5.3 14.7-13 18.3C8.3 30.9 3 24.4 3 16.2V6L16 1.5Z" fill="currentColor" opacity=".95"/><path d="m10.3 17.6 3.6 3.7 7.8-9" fill="none" stroke="#06111f" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}
function SearchIcon() {
  return <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5" fill="none" stroke="currentColor" strokeWidth="2"/><path d="m16 16 4 4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>;
}
function CheckIcon() {
  return <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.2 4.2L19.5 6.5" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}
function ArrowIcon() {
  return <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13m-5-5 5 5-5 5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>;
}

const capabilities = [
  { label: "DNS", detail: "A / AAAA, MX / NS, SPF and DMARC", icon: "01" },
  { label: "TLS", detail: "Trust, identity, expiry and connection", icon: "02" },
  { label: "HTTP", detail: "Redirect safety, HSTS, CSP and headers", icon: "03" },
];
const securityBoundaries = ["Public hosts only", "Ports 80 / 443", "Redirects revalidated", "Bounded deadlines", "No scan history"];
const unavailableMessage = "Inspection service is temporarily unavailable. Try again shortly.";

export default function Home() {
  const [host, setHost] = useState("");
  const [report, setReport] = useState<ActiveReport | null>(null);
  const [request, setRequest] = useState<RequestState>({ status: "idle" });
  const loading = request.status === "loading";

  async function runInspection(rawHost: string) {
    const requestedHost = rawHost.trim();
    if (!requestedHost) return;
    setRequest({ status: "loading", requestedHost });
    try {
      const response = await fetch(`/api/inspect?host=${encodeURIComponent(requestedHost)}`, { cache: "no-store" });
      const body = await response.json().catch(() => null) as unknown;
      if (!response.ok) {
        const message = typeof body === "object" && body !== null && "error" in body && typeof body.error === "string"
          ? body.error
          : unavailableMessage;
        throw new Error(message);
      }
      if (!isInspectionResult(body)) throw new Error("Inspection returned an invalid response");
      setReport({ result: body, source: "live" });
      setHost(body.host);
      setRequest({ status: "success" });
    } catch (error) {
      const message = error instanceof Error ? error.message : unavailableMessage;
      setRequest({ status: "error", requestedHost, message });
    }
  }

  function inspect(event: FormEvent) {
    event.preventDefault();
    void runInspection(host);
  }

  function loadDemo() {
    setReport({ result: demoInspection, source: "demo" });
    setRequest({ status: "idle" });
  }

  const demoWarning = demoInspection.findings.find((finding) => finding.severity === "warning") ?? demoInspection.findings[0];
  const landingError = request.status === "error" ? request.message : "";

  return <main className="cert-app-shell" aria-busy={loading}>
    <header className="app-topbar">
      <div className="brand-lockup"><span className="brand-mark"><ShieldLogo /></span><div><strong>CertScope</strong><small>DOMAIN POSTURE INSPECTOR</small></div></div>
      <div className="product-context"><strong>DNS · TLS · HTTP</strong><span>Evidence-led checks for public infrastructure</span></div>
      <div className="topbar-right"><span className="version-chip">v{CERTSCOPE_VERSION}</span><a className="repo-link" href="https://gitea.itworx.tech/Jens/CertScope-Public" target="_blank" rel="noreferrer">Repository</a></div>
    </header>

    <section className="cert-main">
      {report ? <ReportView key={report.result.host + report.result.inspectedAt + report.source}
        result={report.result}
        source={report.source}
        isLoading={loading}
        requestedHost={request.status === "loading" ? request.requestedHost : null}
        requestError={request.status === "error" ? request : null}
        onReinspect={(currentHost) => void runInspection(currentHost)}
        onInspectAnother={(nextHost) => void runInspection(nextHost)}
      /> : <>
        <section className="hero-workspace" aria-labelledby="certscope-title">
          <div className="hero-copy">
            <p className="tagline">Smaller risks. A more open internet.</p>
            <p className="hero-kicker"><span aria-hidden="true">◆</span> Explainable domain inspection</p>
            <h1 id="certscope-title">CertScope</h1>
            <p className="hero-statement">Public infrastructure posture, made explainable.</p>
            <p className="hero-description">Inspect the DNS, TLS and HTTP posture of any public hostname. Every score change points back to evidence, not a black box.</p>
            <div className="hero-signals" aria-label="Inspection characteristics"><span>Single-host</span><span>Deterministic</span><span>Evidence-led</span></div>
          </div>

          <form onSubmit={inspect} className="inspect-cluster" aria-label="Inspect a hostname">
            <div className="inspect-card-heading"><div><p>Start an inspection</p><strong>Inspect a hostname</strong></div><span className="inspect-card-status">Public targets only</span></div>
            <div className="host-field-wrap"><label htmlFor="hostname">Public hostname</label><input id="hostname" value={host} onChange={(event) => setHost(event.target.value)} placeholder="example.com" autoComplete="off" spellCheck={false} aria-describedby="hostname-help" /><small id="hostname-help">Enter a hostname, not a URL or IP address.</small></div>
            <div className="quick-hosts" aria-label="Example hostnames">{["example.com", "github.com", "cloudflare.com"].map((example) => <button type="button" key={example} onClick={() => setHost(example)} aria-label={"Use " + example}>{example}</button>)}</div>
            <div className="inspect-actions"><button type="submit" className="primary-btn" disabled={loading || !host.trim()}><SearchIcon />{loading ? "Inspecting…" : "Inspect"}</button><button type="button" className="secondary-btn" onClick={loadDemo} disabled={loading}>Load demo <ArrowIcon /></button></div>
            <p className="inspect-card-note">DNS, TLS and HTTP checks stay bounded; no scan history is stored.</p>
            {landingError && <div className="error-banner" role="alert"><strong>Inspection unavailable</strong><span>{landingError}</span><small>Adjust the hostname and try again.</small></div>}
          </form>
        </section>

        {loading && <section className="inspection-progress" role="status" aria-live="polite"><div className="progress-orb" aria-hidden="true"><ShieldLogo /></div><div><strong>Inspecting DNS, TLS and HTTP posture…</strong><p>Collecting bounded evidence for <code>{host.trim()}</code>. Existing evidence will appear as soon as the report is ready.</p></div><div className="progress-checks" aria-hidden="true"><span>Resolve</span><span>Verify</span><span>Explain</span></div></section>}
        <section className="capability-section" aria-labelledby="capabilities-title"><div className="section-heading"><div><p>What CertScope checks</p><h2 id="capabilities-title">One clear report across the public-facing stack.</h2></div><span>Evidence, not guesswork</span></div><div className="capability-grid">{capabilities.map((capability) => <article className="capability-card" key={capability.label}><span className="capability-index" aria-hidden="true">{capability.icon}</span><h3>{capability.label}</h3><p>{capability.detail}</p></article>)}</div></section>
        <section className="security-boundary" aria-label="Inspection security boundary"><div><p>Safe by design</p><strong>Strong boundaries around every connection.</strong></div><ul>{securityBoundaries.map((boundary) => <li key={boundary}><CheckIcon />{boundary}</li>)}</ul></section>
        <section className="demo-preview" aria-labelledby="demo-preview-title"><div className="demo-preview-copy"><p>Deterministic demo</p><h2 id="demo-preview-title">See the report before you inspect.</h2><span>The built-in fixture is local, reproducible and ready to explore without a network request.</span><button type="button" className="preview-demo-button" onClick={loadDemo}>Open demo report <ArrowIcon /></button></div><div className="demo-preview-report" aria-label="Preview of the deterministic demo report"><header><div><span>Demo preview</span><strong>{demoInspection.host}</strong></div><b>{demoInspection.score.overall}<small>/100</small></b></header><div className="preview-score-grid">{(["dns", "tls", "http"] as const).map((category) => <div key={category}><span>{category.toUpperCase()}</span><strong>{demoInspection.score.categories[category]}</strong></div>)}</div><div className="preview-finding"><span className="preview-finding-icon">!</span><div><strong>{demoWarning.title}</strong><p>{demoWarning.summary}</p></div></div></div></section>
      </>}
    </section>
  </main>;
}