"use client";

import { useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function TimestampConverter() {
  const [value, setValue] = useState(() => Math.floor(Date.now() / 1000).toString());

  const result = useMemo(() => {
    const raw = Number(value);
    if (!Number.isFinite(raw)) return null;
    const millis = raw > 9999999999 ? raw : raw * 1000;
    const date = new Date(millis);
    if (Number.isNaN(date.getTime())) return null;
    return {
      local: date.toLocaleString("de-DE"),
      iso: date.toISOString(),
      seconds: Math.floor(date.getTime() / 1000),
      millis: date.getTime(),
    };
  }, [value]);

  return (
    <div className="space-y-5">
      <div className="space-y-2">
        <Label htmlFor="timestamp">Unix Timestamp</Label>
        <Input
          id="timestamp"
          inputMode="numeric"
          value={value}
          onChange={(event) => setValue(event.target.value)}
          placeholder="1715160000"
        />
      </div>

      <Button onClick={() => setValue(Math.floor(Date.now() / 1000).toString())}>
        Aktuellen Timestamp einsetzen
      </Button>

      {result ? (
        <div className="grid gap-3 sm:grid-cols-2">
          <Info label="Lokale Zeit" value={result.local} />
          <Info label="ISO" value={result.iso} />
          <Info label="Sekunden" value={result.seconds.toString()} />
          <Info label="Millisekunden" value={result.millis.toString()} />
        </div>
      ) : (
        <p className="text-sm text-red-500">Bitte gültigen Timestamp eingeben.</p>
      )}
    </div>
  );
}

function Info({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-lg border bg-gray-50 p-4">
      <div className="text-xs font-medium uppercase tracking-wide text-gray-500">{label}</div>
      <div className="mt-2 break-words font-mono text-sm text-gray-900">{value}</div>
    </div>
  );
}