"use client";

import { useEffect, useState } from "react";
import { getInventorySummary, type InventorySummary } from "@/lib/api";
import Link from "next/link";

export default function DashboardPage() {
  const [summary, setSummary] = useState<InventorySummary | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getInventorySummary()
      .then(setSummary)
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const progressPct = summary
    ? Math.min(100, (summary.totalAvailableMt / summary.thresholdTargetMt) * 100)
    : 0;

  return (
    <>
      <section className="hero">
        <div className="hero-grid">
          <div>
            <h2>Manual Stock Management</h2>
            <p>Record inbound and outbound stock movements manually. All transactions require manager approval before inventory is updated.</p>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignSelf: "center" }}>
            <Link href="/stock-in" className="button">↑ Stock In</Link>
            <Link href="/stock-out" className="button secondary" style={{ background: "rgba(255,255,255,0.12)", color: "#fff", border: "1px solid rgba(255,255,255,0.2)" }}>↓ Stock Out</Link>
          </div>
        </div>
      </section>

      <section className="section">
        {loading && <p style={{ color: "var(--muted)" }}>Loading summary…</p>}

        {summary && (
          <>
            <div className="grid grid-4" style={{ marginBottom: 18 }}>
              <div className="card metric">
                <span className="label">Total Stock (MT)</span>
                <span className="value">{summary.totalAvailableMt.toFixed(1)}</span>
                <span className="metric-foot">of {summary.thresholdTargetMt.toLocaleString()} MT capacity</span>
              </div>
              <div className="card metric">
                <span className="label">Total Empty (MT)</span>
                <span className="value" style={{ color: summary.totalEmptyMt < 500 ? "var(--danger)" : summary.totalEmptyMt < 2000 ? "var(--warn)" : "var(--brand)" }}>
                  {summary.totalEmptyMt.toFixed(1)}
                </span>
                <span className="metric-foot">remaining capacity</span>
              </div>
              <div className="card metric">
                <span className="label">Expiring ≤ 6 Months</span>
                <span className="value" style={{ color: summary.expiringWithinSixMonths > 0 ? "var(--warn)" : "var(--ink)" }}>
                  {summary.expiringWithinSixMonths}
                </span>
                <span className="metric-foot">batches</span>
              </div>
              <div className="card metric">
                <span className="label">Pending Approvals</span>
                <span className="value" style={{ color: summary.pendingReviews > 0 ? "var(--danger)" : "var(--ink)" }}>
                  {summary.pendingReviews}
                </span>
                <span className="metric-foot">transactions</span>
              </div>
            </div>

            <div className="grid grid-2">
              <div className="card">
                <div className="card-title">
                  <div>
                    <h3 style={{ margin: 0 }}>Quick Actions</h3>
                    <p style={{ margin: "4px 0 0", color: "var(--muted)", fontSize: "0.82rem" }}>Common tasks</p>
                  </div>
                </div>
                <div style={{ display: "grid", gap: 10 }}>
                  <Link href="/stock-in" style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 14, border: "1.5px solid var(--line)", background: "#f9fbff", textDecoration: "none", color: "var(--ink)", transition: "border-color 160ms ease" }}>
                    <span style={{ fontSize: "1.4rem" }}>↑</span>
                    <div>
                      <strong style={{ display: "block", fontSize: "0.9rem" }}>Record Stock In</strong>
                      <span style={{ color: "var(--muted)", fontSize: "0.8rem" }}>Add inbound stock arrival</span>
                    </div>
                  </Link>
                  <Link href="/stock-out" style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 14, border: "1.5px solid var(--line)", background: "#f9fbff", textDecoration: "none", color: "var(--ink)" }}>
                    <span style={{ fontSize: "1.4rem" }}>↓</span>
                    <div>
                      <strong style={{ display: "block", fontSize: "0.9rem" }}>Record Stock Out</strong>
                      <span style={{ color: "var(--muted)", fontSize: "0.8rem" }}>Remove stock from warehouse</span>
                    </div>
                  </Link>
                  <Link href="/stock-movement-sheets/new" style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 14, border: "1.5px solid var(--line)", background: "#f9fbff", textDecoration: "none", color: "var(--ink)" }}>
                    <span style={{ fontSize: "1.4rem" }}>⊞</span>
                    <div>
                      <strong style={{ display: "block", fontSize: "0.9rem" }}>New Strategic Sheet</strong>
                      <span style={{ color: "var(--muted)", fontSize: "0.8rem" }}>Enter full stock position report</span>
                    </div>
                  </Link>
                </div>
              </div>

              <div className="card">
                <div className="card-title">
                  <div>
                    <h3 style={{ margin: 0 }}>System Overview</h3>
                    <p style={{ margin: "4px 0 0", color: "var(--muted)", fontSize: "0.82rem" }}>How this system works</p>
                  </div>
                </div>
                <div style={{ display: "grid", gap: 12 }}>
                  {[
                    ["1", "Store Keeper submits a Stock In or Stock Out transaction"],
                    ["2", "Store Manager reviews and approves or rejects it"],
                    ["3", "On approval, inventory balances are updated automatically"],
                    ["4", "Strategic sheets record full warehouse stock positions"],
                  ].map(([num, text]) => (
                    <div key={num} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                      <span className="step-number">{num}</span>
                      <span style={{ fontSize: "0.86rem", color: "var(--ink)", lineHeight: 1.5 }}>{text}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </>
        )}
      </section>
    </>
  );
}