import React, { useEffect, useMemo, useRef, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Switch } from "@/components/ui/switch";
import { Checkbox } from "@/components/ui/checkbox";
import { Download, Globe, ImagePlus, LayoutGrid, Settings, SplitSquareVertical, Smartphone, MonitorSmartphone, Wand2, Eye, Shield, Upload, Info } from "lucide-react";


/**
* "Webseite-zu-App Konverter" – Single-File React Starter
* -------------------------------------------------------
* ✨ Features
* - Schöne, moderne UI (Tailwind + shadcn/ui)
* - Formular: URL, App-Name, Icon-Upload & -Vorschau, Theme-Farbe, Plattformen
* - "Generator"-Bereich: Manifest (PWA), Android/iOS WebView Boilerplates, Download-Buttons
* - Vorschau-Seite mit einblendbaren Werbe-Slots (Header, Sidebar, Inline)
* - Einfaches "Admin"-Backend im selben SPA: Werbe-Codes pflegen (lokal gespeichert)
* - Alle Einstellungen werden in localStorage gesichert
*
* 🧱 Hinweise
* - Dies ist ein Frontend-Starter. Für echte App-Pakete (APK/IPA) ist ein Build-Backend nötig.
* - Werbe-Snippets werden hier bewusst nur clientseitig gespeichert und injiziert.
*/


// --- Kleine Hilfsfunktionen ---
const ls = {
get: (k, d) => {
try { const v = localStorage.getItem(k); return v ? JSON.parse(v) : d } catch { return d }
},
set: (k, v) => { try { localStorage.setItem(k, JSON.stringify(v)) } catch {} }
}


const defaultAds = {
header: { enabled: false, code: "<!-- Header-Werbung: z.B. Script-Tag einfügen -->" },
sidebar: { enabled: false, code: "<!-- Sidebar-Werbung: HTML/JS Code hier -->" },
inline: { enabled: false, code: "<!-- Inline-Werbung: wird im Content gerendert -->" }
}


const defaultSettings = {
appName: "Meine App",
siteUrl: "https://example.com",
themeColor: "#0ea5e9",
platforms: { pwa: true, android: true, ios: false },
iconDataUrl: "",
ads: defaultAds,
}


function useLocalState(key, initial) {
const [state, setState] = useState(() => ls.get(key, initial));
useEffect(() => { ls.set(key, state) }, [key, state]);
return [state, setState];
}


function fileToDataURL(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
})
}


function downloadBlob(filename, text, type = "application/json") {
const blob = new Blob([text], { type });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url; a.download = filename; a.click();
setTimeout(() => URL.revokeObjectURL(url), 1500);
}


function CodeBlock({ label, code, filename, mime }) {
return (
<Card className="overflow-hidden">
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle className="text-base">{label}</CardTitle>
<div className="flex items-center gap-2">
{filename && (
<Button size="sm" variant="secondary" onClick={() => downloadBlob(filename, code, mime)}>
<Download className="w-4 h-4 mr-2"/>Download
</Button>
)}
</div>
</CardHeader>
<CardContent>
<pre className="text-xs overflow-auto rounded-lg bg-muted p-4 leading-relaxed select-all"><code>{code}</code></pre>
</CardContent>
</Card>
)