"use client";

import { useMemo, useState } from "react";
import { Bookmark, FileText, Lightbulb, ShieldCheck } from "lucide-react";
import { profitMarginCalculator } from "@/lib/calculators/definitions/profit-margin";
import { runCalculator } from "@/lib/calculators/engine";
import { formatCurrency, formatPercent } from "@/lib/utils";

export function ProfitMarginCalculator() {
  const [values, setValues] = useState({ sellingPrice: 120, productCost: 45, shippingCost: 12, transactionFees: 6, taxes: 4 });
  const result = useMemo(() => runCalculator(profitMarginCalculator, values), [values]);
  const insight = result.insights[0];

  function updateValue(name: keyof typeof values, value: string) {
    setValues((current) => ({ ...current, [name]: Number(value) }));
  }

  return (
    <div className="card grid gap-8 p-6 lg:grid-cols-[380px_1fr]">
      <div className="lg:border-r lg:border-slate-200 lg:pr-8">
        <div className="mb-7 flex items-start gap-4">
          <div className="rounded-2xl bg-blue-50 p-3 text-blue-600"><FileText /></div>
          <div>
            <h2 className="text-xl font-black">Profit Margin Calculator</h2>
            <p className="mt-1 text-sm text-slate-600">Calculate your profit, margin and break-even point.</p>
          </div>
        </div>
        <div className="space-y-4">
          {profitMarginCalculator.inputs.map((input) => (
            <label key={input.name} className="grid gap-2 text-sm font-bold text-slate-700">
              {input.label}
              <div className="flex items-center rounded-xl border border-slate-200 bg-white px-3">
                <input
                  className="w-full bg-transparent py-3 outline-none"
                  type="number"
                  value={values[input.name as keyof typeof values]}
                  onChange={(event) => updateValue(input.name as keyof typeof values, event.target.value)}
                />
                {input.type === "currency" ? <span className="text-slate-400">$</span> : null}
              </div>
            </label>
          ))}
          <button className="mt-2 w-full rounded-xl bg-blue-600 px-5 py-4 font-black text-white shadow-lg shadow-blue-600/20">Calculate</button>
        </div>
      </div>
      <div>
        <div className="grid gap-4 md:grid-cols-4">
          <ResultCard label="Net profit" value={formatCurrency(result.outputs.netProfit)} tone="text-green-600" />
          <ResultCard label="Net margin" value={formatPercent(result.outputs.netMargin)} tone="text-blue-600" />
          <ResultCard label="Break-even units" value={String(result.outputs.breakEvenUnits)} tone="text-purple-600" />
          <div className="metric">
            <p className="text-sm font-bold text-slate-500">Status</p>
            <div className="mt-4 inline-flex items-center gap-2 rounded-xl bg-green-50 px-3 py-2 text-sm font-black text-green-700"><ShieldCheck size={16} /> Healthy margin</div>
          </div>
        </div>
        <div className="mt-5 rounded-2xl border border-green-200 bg-green-50 p-5">
          <div className="flex gap-4">
            <Lightbulb className="shrink-0 text-green-700" />
            <div>
              <h3 className="font-black">Business insight</h3>
              <p className="mt-1 text-sm leading-6 text-slate-700">{insight.message}</p>
            </div>
          </div>
        </div>
        <div className="mt-6">
          <h3 className="font-black">Scenario comparison</h3>
          <div className="mt-4 flex h-36 items-end gap-8 border-b border-slate-200 px-4">
            {[44, 39, 37, 49].map((height, index) => (
              <div key={index} className="flex flex-1 items-end gap-2">
                <div className="w-full rounded-t-lg bg-blue-600" style={{ height: `${height * 1.8}px` }} />
                <div className="w-full rounded-t-lg bg-blue-200" style={{ height: `${height * 1.2}px` }} />
              </div>
            ))}
          </div>
          <div className="mt-5 flex flex-wrap justify-end gap-3">
            <button className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-5 py-3 font-bold"><Bookmark size={18} /> Save scenario</button>
            <button className="inline-flex items-center gap-2 rounded-xl border border-amber-300 bg-amber-50 px-5 py-3 font-bold text-amber-700"><FileText size={18} /> Export PDF <span className="rounded bg-amber-200 px-2 py-1 text-xs">PRO</span></button>
          </div>
        </div>
      </div>
    </div>
  );
}

function ResultCard({ label, value, tone }: { label: string; value: string; tone: string }) {
  return (
    <div className="metric">
      <p className="text-sm font-bold text-slate-500">{label}</p>
      <p className={`mt-3 text-3xl font-black ${tone}`}>{value}</p>
    </div>
  );
}