import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { ToolShell } from "@/components/ToolShell";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export const Route = createFileRoute("/tools/timestamp")({
  head: () => ({
    meta: [
      { title: "Unix Timestamp Converter — Epoch to Date" },
      { name: "description", content: "Convert between Unix timestamps and human-readable dates in your local timezone and UTC." },
      { property: "og:title", content: "Unix Timestamp Converter" },
      { property: "og:description", content: "Quickly convert between Unix epoch seconds and human dates." },
    ],
  }),
  component: TsTool,
});

function TsTool() {
  const [now, setNow] = useState(Math.floor(Date.now() / 1000));
  const [ts, setTs] = useState<string>(String(Math.floor(Date.now() / 1000)));
  const [iso, setIso] = useState<string>(new Date().toISOString().slice(0, 19));

  useEffect(() => {
    const id = setInterval(() => setNow(Math.floor(Date.now() / 1000)), 1000);
    return () => clearInterval(id);
  }, []);

  const tsNum = Number(ts);
  const dateFromTs = !Number.isNaN(tsNum) ? new Date(tsNum * 1000) : null;
  const tsFromIso = (() => { const d = new Date(iso); return Number.isNaN(d.getTime()) ? null : Math.floor(d.getTime() / 1000); })();

  return (
    <ToolShell title="Unix Timestamp Converter" description="Convert epoch seconds to readable dates, and dates back to epoch. Updates live with the current time.">
      <div className="space-y-6">
        <div className="rounded-xl border border-border/80 p-5">
          <p className="text-xs uppercase tracking-wider text-muted-foreground">Current Unix time</p>
          <p className="mt-1 font-mono text-2xl font-semibold">{now}</p>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          <div className="space-y-2">
            <Label>Timestamp → Date</Label>
            <Input value={ts} onChange={(e) => setTs(e.target.value)} className="font-mono" />
            {dateFromTs && !isNaN(dateFromTs.getTime()) && (
              <div className="rounded-md bg-muted p-3 text-sm">
                <p><span className="text-muted-foreground">Local:</span> {dateFromTs.toString()}</p>
                <p><span className="text-muted-foreground">UTC:</span> {dateFromTs.toUTCString()}</p>
                <p><span className="text-muted-foreground">ISO:</span> {dateFromTs.toISOString()}</p>
              </div>
            )}
          </div>
          <div className="space-y-2">
            <Label>Date → Timestamp</Label>
            <Input type="datetime-local" value={iso} onChange={(e) => setIso(e.target.value)} />
            {tsFromIso !== null && (
              <div className="rounded-md bg-muted p-3 text-sm">
                <p><span className="text-muted-foreground">Unix seconds:</span> <span className="font-mono">{tsFromIso}</span></p>
                <p><span className="text-muted-foreground">Milliseconds:</span> <span className="font-mono">{tsFromIso * 1000}</span></p>
              </div>
            )}
          </div>
        </div>
      </div>
    </ToolShell>
  );
}