Text sursă

setInput(e.target.value)}
          rows={3}
          className="mt-1"
          placeholder="Introdu text..."
        />
      </div>
      {[
        { label: "UPPERCASE", value: upper },
        { label: "lowercase", value: lower },
        { label: "Title Case", value: title },
        { label: "Sentence case", value: sentence },
      ].map(({ label, value }) => (
        <div key={label} className="flex items-center gap-2">
          <code className="flex-1 truncate rounded border bg-muted/30 px-2 py-1 text-xs">
            {value || "—"}
          </code>
          <span className="w-24 text-xs text-muted-foreground">{label}</span>
          <CopyButton text={value} />
        </div>
      ))}
    </div>
  );
}

function CharacterCounter() {
  const [input, setInput] = useState("");
  const chars = input.length;
  const charsNoSpaces = input.replace(/\s/g, "").length;
  const words = input.trim() ? input.trim().split(/\s+/).length : 0;
  const lines = input ? input.split("\n").length : 0;

return (
    <div className="space-y-3">
      <div>
        <Label>Text</Label>
        <Textarea
          value={input}
          onChange={(e) => setInput(e.target.value)}
          rows={5}
          className="mt-1"
          placeholder="Introdu text..."
        />
      </div>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        <Card>
          <CardContent className="p-3">
            <p className="text-xs text-muted-foreground">Caractere</p>
            <p className="text-xl font-bold">{chars}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-3">
            <p className="text-xs text-muted-foreground">Fără spații</p>
            <p className="text-xl font-bold">{charsNoSpaces}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-3">
            <p className="text-xs text-muted-foreground">Cuvinte</p>
            <p className="text-xl font-bold">{words}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-3">
            <p className="text-xs text-muted-foreground">Linii</p>
            <p className="text-xl font-bold">{lines}</p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

function PercentageCalculator() {
  const [value, setValue] = useState("");
  const [total, setTotal] = useState("");
  const [percent, setPercent] = useState("");

const v = parseFloat(value);
  const t = parseFloat(total);
  const p = parseFloat(percent);

const pctOfTotal =
    !isNaN(v) && !isNaN(t) && t !== 0 ? ((v / t) * 100).toFixed(2) : "—";
  const valFromPct = !isNaN(p) && !isNaN(t) ? ((p / 100) * t).toFixed(2) : "—";

return (
    <div className="space-y-4">
      <div className="grid gap-3 sm:grid-cols-3">
        <div>
          <Label>Valoare</Label>
          <Input
            type="number"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            className="mt-1"
          />
        </div>
        <div>
          <Label>Total</Label>
          <Input
            type="number"
            value={total}
            onChange={(e) => setTotal(e.target.value)}
            className="mt-1"
          />
        </div>
        <div>
          <Label>Procent</Label>
          <Input
            type="number"
            value={percent}
            onChange={(e) => setPercent(e.target.value)}
            className="mt-1"
          />
        </div>
      </div>
      <div className="space-y-2 rounded-md border bg-muted/30 p-3 text-sm">
        <p>
          <strong>{value || "?"}</strong> din <strong>{total || "?"}</strong> ={" "}
          <strong>{pctOfTotal}%</strong>
        </p>
        <p>
          <strong>{percent || "?"}%</strong> din <strong>{total || "?"}</strong>{" "}
          = <strong>{valFromPct}</strong>
        </p>
      </div>
    </div>
  );
}

function AreaConverter() {
  const [mp, setMp] = useState("");
  const v = parseFloat(mp);

const conversions = !isNaN(v)
    ? [
        { label: "mp (m²)", value: v.toFixed(2) },
        { label: "ari (100 m²)", value: (v / 100).toFixed(4) },
        { label: "hectare (10.000 m²)", value: (v / 10000).toFixed(6) },
        { label: "km²", value: (v / 1000000).toFixed(8) },
        { label: "sq ft", value: (v * 10.7639).toFixed(2) },
      ]
    : [];

return (
    <div className="space-y-3">
      <div>
        <Label>Suprafață (m²)</Label>
        <Input
          type="number"
          value={mp}
          onChange={(e) => setMp(e.target.value)}
          className="mt-1"
          placeholder="Introdu suprafața..."
        />
      </div>
      {conversions.length > 0 && (
        <div className="space-y-1.5">
          {conversions.map(({ label, value: val }) => (
            <div key={label} className="flex items-center gap-2">
              <code className="flex-1 rounded border bg-muted/30 px-2 py-1 text-xs">
                {val}
              </code>
              <span className="w-36 text-xs text-muted-foreground">
                {label}
              </span>
              <CopyButton text={val} />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── U-value → R-value Converter ─────────────────────────────────────────────

function UValueConverter() {
  const [uValue, setUValue] = useState("");
  const [thickness, setThickness] = useState("");

const u = parseFloat(uValue);
  const t = parseFloat(thickness);
  const rValue = !isNaN(u) && u > 0 ? (1 / u).toFixed(4) : null;
  const rsi = 0.13;
  const rse = 0.04;
  const rTotal =
    rValue !== null ? (parseFloat(rValue) + rsi + rse).toFixed(4) : null;
  const lambda =
    rValue !== null && !isNaN(t) && t > 0
      ? (t / 100 / parseFloat(rValue)).toFixed(4)
      : null;

return (
    <div className="space-y-4">
      <div className="grid gap-3 sm:grid-cols-2">
        <div>
          <Label>Coeficient U (W/m²K)</Label>
          <Input
            type="number"
            step="0.01"
            min="0"
            value={uValue}
            onChange={(e) => setUValue(e.target.value)}
            className="mt-1"
            placeholder="ex: 0.35"
          />
        </div>
        <div>
          <Label>Grosime material (cm) — opțional</Label>
          <Input
            type="number"
            step="0.1"
            min="0"
            value={thickness}
            onChange={(e) => setThickness(e.target.value)}
            className="mt-1"
            placeholder="ex: 20"
          />
        </div>
      </div>
      {rValue !== null && (
        <div className="space-y-2 rounded-md border bg-muted/30 p-3 text-sm">
          <div className="flex items-center justify-between">
            <span className="font-medium">R = 1/U</span>
            <div className="flex items-center gap-1">
              <code className="rounded border bg-muted px-2 py-0.5">
                {rValue} m²K/W
              </code>
              <CopyButton text={rValue} />
            </div>
          </div>
          <div className="flex items-center justify-between text-muted-foreground">
            <span>Rsi (suprafață interioară)</span>
            <code className="rounded border bg-muted px-2 py-0.5">
              {rsi} m²K/W
            </code>
          </div>
          <div className="flex items-center justify-between text-muted-foreground">
            <span>Rse (suprafață exterioară)</span>
            <code className="rounded border bg-muted px-2 py-0.5">
              {rse} m²K/W
            </code>
          </div>
          <div className="flex items-center justify-between font-medium border-t pt-2 mt-1">
            <span>R total (cu Rsi + Rse)</span>
            <div className="flex items-center gap-1">
              <code className="rounded border bg-muted px-2 py-0.5">
                {rTotal} m²K/W
              </code>
              <CopyButton text={rTotal ?? ""} />
            </div>
          </div>
          {lambda !== null && (
            <div className="flex items-center justify-between text-muted-foreground border-t pt-2 mt-1">
              <span>Conductivitate λ = d/R</span>
              <div className="flex items-center gap-1">
                <code className="rounded border bg-muted px-2 py-0.5">
                  {lambda} W/mK
                </code>
                <CopyButton text={lambda} />
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ─── AI Artifact Cleaner ──────────────────────────────────────────────────────

function AiArtifactCleaner() {
  const [input, setInput] = useState("");

const cleaned = input ? clean(input) : "";

return (
    <div className="space-y-3">
      <div className="grid gap-3 sm:grid-cols-2">
        <div>
          <Label>Text original (output AI)</Label>
          <Textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            className="mt-1 h-72 font-mono text-xs"
            placeholder="Lipește textul generat de AI..."
          />
        </div>
        <div>
          <div className="flex items-center justify-between">
            <Label>Text curățat</Label>
            {cleaned && <CopyButton text={cleaned} />}
          </div>
          <Textarea
            value={cleaned}
            readOnly
            className="mt-1 h-72 font-mono text-xs bg-muted/30"
          />
        </div>
      </div>
      <p className="text-xs text-muted-foreground">
        Operații: eliminare markdown (###, **, `, liste, citate), emoji,
        corectare encoding românesc (mojibake), curățare Unicode invizibil,
        normalizare ghilimele / cratime / spații multiple.
      </p>
    </div>
  );
}

// ─── MDLPA Date Locale ────────────────────────────────────────────────────────

function MdlpaValidator() {
  return (
    <div className="space-y-3">
      <div className="flex flex-wrap items-center gap-3 text-sm">
        <a
          href="https://datelocale.mdlpa.ro"
          target="_blank"
          rel="noopener noreferrer"
          className="text-primary underline underline-offset-2"
        >
          Deschide datelocale.mdlpa.ro ↗
        </a>
        <span className="text-muted-foreground">•</span>
        <a
          href="https://datelocale.mdlpa.ro/ro/about/tutorials"
          target="_blank"
          rel="noopener noreferrer"
          className="text-primary underline underline-offset-2"
        >
          Tutoriale video ↗
        </a>
        <span className="text-muted-foreground">•</span>
        <a
          href="https://datelocale.mdlpa.ro/ro/about/info/reguli"
          target="_blank"
          rel="noopener noreferrer"
          className="text-primary underline underline-offset-2"
        >
          Reguli de calcul ↗
        </a>
      </div>
      <div
        className="overflow-hidden rounded-md border"
        style={{ height: "560px" }}
      >
        <iframe
          src="https://datelocale.mdlpa.ro"
          className="h-full w-full"
          title="MDLPA — Date Locale"
          allow="fullscreen"
        />
      </div>
    </div>
  );
}

// ─── PDF Reducer (Stirling PDF) ───────────────────────────────────────────────

function PdfReducer() {
  const [file, setFile] = useState<File | null>(null);
  const [optimizeLevel, setOptimizeLevel] = useState("2");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const fileRef = useRef<HTMLInputElement>(null);

return (
    <div className="space-y-4">
      <div className="space-y-1.5">
        <Label>Fișier PDF</Label>
        <input
          ref={fileRef}
          type="file"
          accept=".pdf"
          className="hidden"
          onChange={(e) => {
            setFile(e.target.files?.[0] ?? null);
            setError("");
          }}
        />
        <div className="flex flex-wrap items-center gap-2">
          <Button variant="outline" onClick={() => fileRef.current?.click()}>
            Selectează PDF...
          </Button>
          {file && (
            <span className="text-sm text-muted-foreground">{file.name}</span>
          )}
        </div>
      </div>

<div className="space-y-1.5">
        <Label>Nivel compresie</Label>
        <select
          value={optimizeLevel}
          onChange={(e) => setOptimizeLevel(e.target.value)}
          className="mt-1 w-full rounded-md border bg-background px-3 py-2 text-sm"
        >
          <option value="0">0 — fără modificări (test)</option>
          <option value="1">1 — compresie minimă</option>
          <option value="2">2 — echilibrat (recomandat)</option>
          <option value="3">3 — compresie mare</option>
          <option value="4">4 — compresie maximă</option>
        </select>
      </div>

<div className="flex flex-wrap gap-2">
        <Button onClick={handleCompress} disabled={!file || loading}>
          {loading ? "Se comprimă..." : "Comprimă PDF"}
        </Button>
        <Button variant="ghost" asChild>
          <a
            href="http://10.10.10.166:8087/compress-pdf"
            target="_blank"
            rel="noopener noreferrer"
          >
            Deschide Stirling PDF ↗
          </a>
        </Button>
      </div>

{error && <p className="text-sm text-destructive">{error}</p>}
    </div>
  );
}

// ─── Quick OCR ────────────────────────────────────────────────────────────────

function QuickOcr() {
  const [imageSrc, setImageSrc] = useState<string | null>(null);
  const [text, setText] = useState("");
  const [progress, setProgress] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [lang, setLang] = useState("ron+eng");
  const fileRef = useRef<HTMLInputElement>(null);

const handleFile = (file: File) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const src = e.target?.result as string;
      setImageSrc(src);
      runOcr(src);
    };
    reader.readAsDataURL(file);
  };

const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    const file = Array.from(e.dataTransfer.files).find((f) =>
      f.type.startsWith("image/"),
    );
    if (file) handleFile(file);
  };

const handlePaste = (e: React.ClipboardEvent) => {
    const item = Array.from(e.clipboardData.items).find((i) =>
      i.type.startsWith("image/"),
    );
    const file = item?.getAsFile();
    if (file) handleFile(file);
  };

return (
    <div className="space-y-3" onPaste={handlePaste}>
      <div className="flex flex-wrap items-center gap-3">
        <select
          value={lang}
          onChange={(e) => setLang(e.target.value)}
          className="rounded-md border bg-background px-3 py-1.5 text-sm"
        >
          <option value="ron+eng">Română + Engleză</option>
          <option value="ron">Română</option>
          <option value="eng">Engleză</option>
        </select>
        <span className="text-xs text-muted-foreground">
          sau Ctrl+V pentru a lipi imaginea
        </span>
      </div>

<div
        className="flex min-h-[120px] cursor-pointer items-center justify-center rounded-md border-2 border-dashed p-4 text-sm text-muted-foreground transition-colors hover:border-primary/50"
        onClick={() => fileRef.current?.click()}
        onDrop={handleDrop}
        onDragOver={(e) => e.preventDefault()}
      >
        {imageSrc ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={imageSrc}
            alt="preview"
            className="max-h-48 max-w-full rounded object-contain"
          />
        ) : (
          <span>Trage o imagine aici, apasă pentru a selecta, sau Ctrl+V</span>
        )}
      </div>
      <input
        ref={fileRef}
        type="file"
        accept="image/*"
        className="hidden"
        onChange={(e) => {
          const f = e.target.files?.[0];
          if (f) handleFile(f);
        }}
      />

{loading && (
        <div className="space-y-1">
          <div className="flex justify-between text-xs text-muted-foreground">
            <span>Se procesează... (primul rulaj descarcă modelul ~10 MB)</span>
            <span>{progress}%</span>
          </div>
          <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
            <div
              className="h-full bg-primary transition-all"
              style={{ width: `${progress}%` }}
            />
          </div>
        </div>
      )}

{error && <p className="text-sm text-destructive">{error}</p>}

{text && (
        <div>
          <div className="flex items-center justify-between">
            <Label>Text extras</Label>
            <CopyButton text={text} />
          </div>
          <Textarea
            value={text}
            readOnly
            className="mt-1 h-56 font-mono text-xs bg-muted/30"
          />
        </div>
      )}
    </div>
  );
}

// ─── Main Module ──────────────────────────────────────────────────────────────

export function MiniUtilitiesModule() {
  return (
    <Tabs defaultValue="text-case" className="space-y-4">
      <TabsList className="flex-wrap">
        <TabsTrigger value="text-case">
          <Type className="mr-1 h-3.5 w-3.5" /> Transformare text
        </TabsTrigger>
        <TabsTrigger value="char-count">
          <Hash className="mr-1 h-3.5 w-3.5" /> Numărare caractere
        </TabsTrigger>
        <TabsTrigger value="percentage">
          <Percent className="mr-1 h-3.5 w-3.5" /> Procente
        </TabsTrigger>
        <TabsTrigger value="area">
          <Ruler className="mr-1 h-3.5 w-3.5" /> Suprafețe
        </TabsTrigger>
        <TabsTrigger value="u-value">
          <Zap className="mr-1 h-3.5 w-3.5" /> U → R
        </TabsTrigger>
        <TabsTrigger value="ai-cleaner">
          <Wand2 className="mr-1 h-3.5 w-3.5" /> Curățare AI
        </TabsTrigger>
        <TabsTrigger value="mdlpa">
          <Building2 className="mr-1 h-3.5 w-3.5" /> MDLPA
        </TabsTrigger>
        <TabsTrigger value="pdf-reducer">
          <FileDown className="mr-1 h-3.5 w-3.5" /> Reducere PDF
        </TabsTrigger>
        <TabsTrigger value="ocr">
          <ScanText className="mr-1 h-3.5 w-3.5" /> OCR
        </TabsTrigger>
      </TabsList>

<TabsContent value="text-case">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Transformare text</CardTitle>
          </CardHeader>
          <CardContent>
            <TextCaseConverter />
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="char-count">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Numărare caractere</CardTitle>
          </CardHeader>
          <CardContent>
            <CharacterCounter />
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="percentage">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Calculator procente</CardTitle>
          </CardHeader>
          <CardContent>
            <PercentageCalculator />
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="area">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Convertor suprafețe</CardTitle>
          </CardHeader>
          <CardContent>
            <AreaConverter />
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="u-value">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">
              Convertor U → R (termoizolație)
            </CardTitle>
          </CardHeader>
          <CardContent>
            <UValueConverter />
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="ai-cleaner">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Curățare text AI</CardTitle>
          </CardHeader>
          <CardContent>
            <AiArtifactCleaner />
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="mdlpa">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">
              MDLPA — Date locale construcții
            </CardTitle>
          </CardHeader>
          <CardContent>
            <MdlpaValidator />
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="pdf-reducer">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Reducere dimensiune PDF</CardTitle>
          </CardHeader>
          <CardContent>
            <PdfReducer />
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="ocr">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">
              OCR — extragere text din imagini
            </CardTitle>
          </CardHeader>
          <CardContent>
            <QuickOcr />
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  );
}