"use client";

import { useEffect, useState, useCallback } from "react";
import { QrCode, Link as LinkIcon, CheckCircle2, ShieldCheck, RefreshCw } from "lucide-react";
import { qrCodesApi } from "@/lib/api";
import { QRCodeSVG } from "qrcode.react";

export default function QrCodesPage() {
  const [codes, setCodes] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [copiedUrl, setCopiedUrl] = useState<string | null>(null);

  const fetchCodes = useCallback(async () => {
    try {
      const res = await qrCodesApi.getAll();
      setCodes(res.data || []);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchCodes();
  }, [fetchCodes]);

  const getFullUrl = (relativeUrl: string) => {
    if (typeof window !== "undefined") {
      return `${window.location.origin}${relativeUrl}`;
    }
    return relativeUrl;
  };

  const copyToClipboard = (url: string) => {
    navigator.clipboard.writeText(url);
    setCopiedUrl(url);
    setTimeout(() => setCopiedUrl(null), 2000);
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold">QR Kod Yöneticisi</h1>
        <button
          onClick={() => { setLoading(true); fetchCodes(); }}
          className="flex items-center gap-2 text-sm bg-muted text-foreground px-4 py-2 rounded-lg hover:bg-accent transition-colors"
        >
          <RefreshCw className="w-4 h-4" /> Yenile
        </button>
      </div>

      {/* Security Info Banner */}
      <div className="bg-primary/5 border border-primary/20 rounded-xl p-4 flex items-center gap-3">
        <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
          <ShieldCheck className="w-5 h-5 text-primary" />
        </div>
        <div className="flex-1">
          <p className="text-sm font-semibold text-foreground">Güvenlik Koruması Aktif</p>
          <p className="text-xs text-muted-foreground">
            QR kodlar sabit tokenlıdır ve basılı kodlar her zaman çalışır. Kötüye kullanıma karşı IP bazlı sipariş sınırı (dk/2, saat/5) ve masa başı limit (max ₺500, max 10 kalem) aktiftir.
          </p>
        </div>
      </div>

      <div className="bg-card border border-border/50 rounded-xl p-6">
        <div className="flex items-center gap-3 mb-6">
          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
            <QrCode className="w-5 h-5 text-primary" />
          </div>
          <div>
            <h2 className="text-lg font-bold">Masa QR Kodları</h2>
            <p className="text-sm text-muted-foreground">
              Müşterilerin sipariş verebilmesi için güvenlik tokenı içeren QR kodlar.
            </p>
          </div>
        </div>

        {loading ? (
          <div className="text-center py-10">
            <div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin mx-auto mb-4" />
            <p className="text-muted-foreground">Yükleniyor...</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            {codes.map((c) => {
              const fullUrl = getFullUrl(c.url);
              return (
                <div
                  key={c.table_number}
                  className="border border-border/50 rounded-xl p-4 flex flex-col items-center bg-background"
                >
                  <h3 className="text-lg font-bold mb-3">Masa {c.table_number}</h3>

                  <div className="bg-white p-2 rounded-lg mb-4">
                    <QRCodeSVG value={fullUrl} size={150} level="H" />
                  </div>
                  <div className="w-full space-y-2 mt-auto">
                    <button
                      onClick={() => copyToClipboard(fullUrl)}
                      className="w-full flex items-center justify-center gap-2 text-sm bg-muted text-foreground py-2 rounded-lg hover:bg-accent transition-colors"
                    >
                      {copiedUrl === fullUrl ? (
                        <>
                          <CheckCircle2 className="w-4 h-4 text-emerald" /> Kopyalandı
                        </>
                      ) : (
                        <>
                          <LinkIcon className="w-4 h-4" /> Linki Kopyala
                        </>
                      )}
                    </button>
                    <a
                      href={fullUrl}
                      target="_blank"
                      rel="noreferrer"
                      className="w-full flex items-center justify-center gap-2 text-sm bg-primary/10 text-primary py-2 rounded-lg hover:bg-primary/20 transition-colors"
                    >
                      Yeni Sekmede Aç
                    </a>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}