import React, { useState, useEffect } from "react";
import logo from './logo.png';
import { Card, Title, Text, AreaChart, BarChart } from "@tremor/react";
import {
  CreditCard,
  Wallet,
  Wallet2,
  HandCoins,
  Boxes,
  Box,
  Truck,
  Gauge,
  TrendingUp,
  PiggyBank,
  ShoppingCart,
  ShoppingBag,
  BadgeCheck,
  DollarSign,
  Ship,
  Package,
  ArrowDownCircle,
  ArrowUpCircle,
  LineChart,
  BarChart3,
  FileText,
  Receipt,
  Newspaper,
  ScrollText,
} from "lucide-react";

function SplashScreen() {
  return (
    <div className="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-900 z-50">
      <div className="animate-splash opacity-0 scale-75">
        <img src={logo} alt="Logo" className="h-32 object-contain" />
      </div>
    </div>
  );
}

/* --------------------------
   Communication Tryton
-------------------------- */

function openInTryton(model, res_id, view_mode = ['tree'], domain, message = "open_tab", context = {}) {
  window.parent.postMessage(
    {
      type: message,
      payload: { model, res_id, view_mode, domain, context },
    },
    "*"
  );
}

/* --------------------------
   Données
-------------------------- */

const params = new URLSearchParams(window.location.search);
const defaultSaleId = params.get("sale_id") || 249;
const defaultPnlAmount = params.get("pnl_amount");
const exposure = params.get("exposure");
const topay = params.get("topay");
const toreceive = params.get("toreceive");
const draft_p = params.get("draft_p");
const val_p = params.get("val_p");
const conf_p = params.get("conf_p");
const draft_s = params.get("draft_s");
const val_s = params.get("val_s");
const conf_s = params.get("conf_s");
const shipment_d = params.get("shipment_d");
const shipment_s = params.get("shipment_s");
const shipment_r = params.get("shipment_r");
const lot_m = params.get("lot_m");
const lot_a = params.get("lot_a");
const lot_al = params.get("lot_al");
const inv_p = params.get("inv_p");
const inv_s = params.get("inv_s");
const move_cash = params.get("move_cash");

const data = [
  { date: "2025-01-01", value: 12 },
  { date: "2025-01-02", value: 14 },
  { date: "2025-01-03", value: 10 },
  { date: "2025-01-04", value: 18 },
  { date: "2025-01-05", value: 22 },
];

const purchaseData = [
  { status: "Draft", count: draft_p, color: "bg-teal-500", onClick: () => openInTryton("purchase.purchase", undefined, ['tree', 'form'],[['state', '=', 'draft']])},
  { status: "Validated", count: val_p, color: "bg-cyan-500", onClick: () => openInTryton("purchase.purchase", undefined, ['tree', 'form'],[['state', '=', 'quotation']]) },
  { status: "Confirmed", count: conf_p, color: "bg-blue-500", onClick: () => openInTryton("purchase.purchase", undefined, ['tree', 'form'],[['state', '=', 'confirmed']]) },
];

const saleData = [
  { status: "Draft", count: draft_s, color: "bg-teal-500", onClick: () => openInTryton("sale.sale", undefined, ['tree', 'form'],[['state', '=', 'draft']])},
  { status: "Validated", count: val_s, color: "bg-cyan-500", onClick: () => openInTryton("sale.sale", undefined, ['tree', 'form'],[['state', '=', 'quotation']]) },
  { status: "Confirmed", count: conf_s, color: "bg-blue-500", onClick: () => openInTryton("sale.sale", undefined, ['tree', 'form'],[['state', '=', 'confirmed']]) },
];

const shipmentData = [
  { status: "Draft", count: shipment_d, color: "bg-teal-500", onClick: () => openInTryton("stock.shipment.in", undefined, ['tree', 'form'],[['state', '=', 'draft']])},
  { status: "Started", count: shipment_s, color: "bg-cyan-500", onClick: () => openInTryton("stock.shipment.in", undefined, ['tree', 'form'],[['state', '=', 'started']]) },
  { status: "Received", count: shipment_r, color: "bg-blue-500", onClick: () => openInTryton("stock.shipment.in", undefined, ['tree', 'form'],[['state', '=', 'received']]) },
];

const lotData = [
  { status: "Matched", count: lot_m, color: "bg-teal-500", onClick: () => openInTryton("lot.report", undefined, ['tree', 'form'],[["r_lot_matched", ">", 0]],'exec_window',{
                    purchase: null,
                    sale: null,
                    shipment: null,
                    type: 'matched',
                    state: 'all',
                    wh: 'all',
                    group: 'by_physic'
                })},
  { status: "Available", count: lot_a, color: "bg-cyan-500", onClick: () => openInTryton("lot.report", undefined, ['tree', 'form'],[['id', '>', 0]],'exec_window') },
  { status: "All", count: lot_al, color: "bg-blue-500", onClick: () => openInTryton("lot.report", undefined, ['tree', 'form'],[['id', '>', 0]],'exec_window') },
];

const kpis = [
  {
    title: "PNL ($)",
    value: defaultPnlAmount,
    trend: "+12% vs last month",
    trendValue: 4.4,
    icon: BarChart3,
    action: () => openInTryton("pnl.bi", [1], ['form'])
  },
  {
    title: "Exposure (Mt)",
    value: exposure,
    trend: "-3% this month",
    trendValue: -3,
    icon: Gauge,
    action: () => openInTryton("open.position.report", undefined, ['tree'])
  },
  {
    title: "Amount to pay ($)",
    value: topay,
    trend: "+5% this month",
    trendValue: 5,
    icon: DollarSign,
    action: () => openInTryton("account.invoice", undefined, ['tree','form'],[['type', '=', 'in']])
  },
  {
    title: "Amount to receive ($)",
    value: toreceive,
    trend: "-1% this month",
    trendValue: -1,
    icon: HandCoins,
    action: () => openInTryton("account.invoice", undefined, ['tree','form'],[['type', '=', 'out']])
  },
];

const news = [
  {
    type: "Forex",
    label: "EUR/USD: 1.1400",
    trend: "+0.88%",
    color: "#1E3A8A", // bleu foncé
    date: "30-11-2025",
    icon: TrendingUp, // icône tendance boursière
  },
  // {
  //   type: "Logistic",
  //   label: "INTHIRA NAREE loaded",
  //   date: "08-10-2025",
  //   color: "#1E3A8A",
  //   icon: Newspaper,
  // },
];

const cards = [
  // {
  //   id: "sales_pending",
  //   title: "Sales Pending",
  //   value: 7,
  //   trend: "+3% this week",
  //   icon: Receipt,
  //   action: () => openInTryton("sale.sale", undefined, "tree")
  // },
  {
    id: "purchase_invoices",
    title: "Purchase Invoices",
    value: inv_p,
    trend: "-2% this week",
    icon: Receipt,
    amountInvoiced: 100523,
    amount30Days: 456147,
    amount60Days: 847512,
    action: () => openInTryton("account.invoice", undefined, ['tree','form'],[['type', '=', 'in']])
  },
  {
    id: "sale_invoices",
    title: "Sale Invoices",
    value: inv_s,
    trend: "+2% this week",
    icon: FileText,
    amountInvoiced: 100523,
    amount30Days: 456147,
    amount60Days: 847512,
    action: () => openInTryton("account.invoice", undefined, ['tree','form'],[['type', '=', 'out']])
  },
  {
    id: "payments_to_validate",
    title: "Payments To Validate",
    value: move_cash,
    trend: "+12% this week",
    icon: HandCoins,
    amountInvoiced: 100523,
    amount30Days: 456147,
    amount60Days: 847512,
    action: () => openInTryton("account.move", undefined, ['tree','form'],[['journal', '=', 3]])
  },
  // {
  //   id: "prepayments",
  //   title: "Prepayments To Validate",
  //   value: 9,
  //   trend: "+5% this week",
  //   icon: PiggyBank,
  //   action: () => openInTryton("account.move", undefined, "tree")
  // },
];

/* --------------------------
   Dashboard Component
-------------------------- */

export default function App() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // durée du splash
    const timer = setTimeout(() => setLoading(false), 1500);
    return () => clearTimeout(timer);
  }, []);

  if (loading) return <SplashScreen />;

  const saleId = defaultSaleId;
  const total_p = purchaseData.reduce((sum, item) => sum + Number(item.count), 0);
  const total_s = saleData.reduce((sum, item) => sum + Number(item.count), 0);
  const total_sh = shipmentData.reduce((sum, item) => sum + Number(item.count), 0);
  const total_l = lotData.reduce((sum, item) => sum + Number(item.count), 0);

  return (
    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
      <main className="flex-1">

        {/* KPIs en tête */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          {kpis.map((kpi) => {
            const Icon = kpi.icon;
            const isPositive = kpi.trendValue >= 0;
            return (
              <Card
                key={kpi.title}
                onClick={kpi.action}
                className="relative p-4 flex flex-col items-center gap-2 shadow-md rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-hidden"
              >

                <Icon className="absolute top-2 right-2 w-10 h-10 opacity-10" />

                <Title className="text-sm text-center">{kpi.title}</Title>
                <Text className="text-4xl font-bold text-center">{kpi.value}</Text>

                <div className="mt-4 flex flex-col items-center gap-1">
                  <span
                    className={`
                      px-2 py-0.5 text-xs font-semibold rounded-md border
                      ${
                        isPositive
                          ? "bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800"
                          : "bg-red-50 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800"
                      }
                    `}
                  >
                    {isPositive ? "+" : ""}
                    {kpi.trendValue}%
                  </span>

                  <span className="text-xs text-gray-500 dark:text-gray-400">
                    vs last month
                  </span>
                </div>
              </Card>
            );
          })}
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">

          {/* Purchase */}
          <Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
            <div className="flex items-center justify-between mb-4">
              <Title className="text-base">Purchases</Title>
              <ShoppingCart className="w-6 h-6" />
            </div>
            <Text className="text-3xl font-bold mb-1">{total_p}</Text>
            <Text className="text-xs text-gray-500 mb-4">Across all statuses</Text>

            <div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>

            <div className="flex w-full h-3 rounded overflow-hidden mb-4 bg-gray-200 dark:bg-gray-600">
              {purchaseData.map((item, i) => (
                <div
                  key={i}
                  className={`${item.color} h-3`}
                  style={{
                    width: `${(item.count / total_p) * 100}%`,
                    marginRight: i < purchaseData.length - 1 ? "2px" : "0",
                  }}
                ></div>
              ))}
            </div>

            <div className="space-y-2 text-xs">
              {purchaseData.map((item) => (
                <div
                  key={item.status}
                  onClick={item.onClick}
                  className="flex items-center gap-2 cursor-pointer p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <span className={`w-3 h-3 rounded ${item.color}`}></span>
                  <span className="flex-1">{item.status}</span>
                  <span className="text-gray-500">
                    ({item.count} / {((item.count / total_p) * 100).toFixed(1)}%)
                  </span>
                </div>
              ))}
            </div>
          </Card>
          {/* Sale */}
          <Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
            <div className="flex items-center justify-between mb-4">
              <Title className="text-base">Sales</Title>
              <BadgeCheck className="w-6 h-6" />
            </div>
            <Text className="text-3xl font-bold mb-1">{total_s}</Text>
            <Text className="text-xs text-gray-500 mb-4">Across all statuses</Text>

            <div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>

            <div className="flex w-full h-3 rounded overflow-hidden mb-4 bg-gray-200 dark:bg-gray-600">
              {saleData.map((item, i) => (
                <div
                  key={i}
                  className={`${item.color} h-3`}
                  style={{
                    width: `${(item.count / total_s) * 100}%`,
                    marginRight: i < saleData.length - 1 ? "2px" : "0",
                  }}
                ></div>
              ))}
            </div>

            <div className="space-y-2 text-xs">
              {saleData.map((item) => (
                <div
                  key={item.status}
                  onClick={item.onClick}
                  className="flex items-center gap-2 cursor-pointer p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <span className={`w-3 h-3 rounded ${item.color}`}></span>
                  <span className="flex-1">{item.status}</span>
                  <span className="text-gray-500">
                    ({item.count} / {((item.count / total_s) * 100).toFixed(1)}%)
                  </span>
                </div>
              ))}
            </div>
          </Card>
          {/* Shipment */}
          <Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
            <div className="flex items-center justify-between mb-4">
              <Title className="text-base">Shipments</Title>
              <Ship className="w-6 h-6" />
            </div>
            <Text className="text-3xl font-bold mb-1">{total_sh}</Text>
            <Text className="text-xs text-gray-500 mb-4">Across all statuses</Text>

            <div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>

            <div className="flex w-full h-3 rounded overflow-hidden mb-4 bg-gray-200 dark:bg-gray-600">
              {shipmentData.map((item, i) => (
                <div
                  key={i}
                  className={`${item.color} h-3`}
                  style={{
                    width: `${(item.count / total_sh) * 100}%`,
                    marginRight: i < shipmentData.length - 1 ? "2px" : "0",
                  }}
                ></div>
              ))}
            </div>

            <div className="space-y-2 text-xs">
              {shipmentData.map((item) => (
                <div
                  key={item.status}
                  onClick={item.onClick}
                  className="flex items-center gap-2 cursor-pointer p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <span className={`w-3 h-3 rounded ${item.color}`}></span>
                  <span className="flex-1">{item.status}</span>
                  <span className="text-gray-500">
                    ({item.count} / {((item.count / total_sh) * 100).toFixed(1)}%)
                  </span>
                </div>
              ))}
            </div>
          </Card>
          {/* Lot */}
          <Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
            <div className="flex items-center justify-between mb-4">
              <Title className="text-base">Lots</Title>
              <Package className="w-6 h-6" />
            </div>
            <Text className="text-3xl font-bold mb-1">{total_l}</Text>
            <Text className="text-xs text-gray-500 mb-4">Across all statuses</Text>

            <div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>

            <div className="flex w-full h-3 rounded overflow-hidden mb-4 bg-gray-200 dark:bg-gray-600">
              {lotData.map((item, i) => (
                <div
                  key={i}
                  className={`${item.color} h-3`}
                  style={{
                    width: `${(item.count / total_l) * 100}%`,
                    marginRight: i < lotData.length - 1 ? "2px" : "0",
                  }}
                ></div>
              ))}
            </div>

            <div className="space-y-2 text-xs">
              {lotData.map((item) => (
                <div
                  key={item.status}
                  onClick={item.onClick}
                  className="flex items-center gap-2 cursor-pointer p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <span className={`w-3 h-3 rounded ${item.color}`}></span>
                  <span className="flex-1">{item.status}</span>
                  <span className="text-gray-500">
                    ({item.count} / {((item.count / total_l) * 100).toFixed(1)}%)
                  </span>
                </div>
              ))}
            </div>
          </Card>
          {/* Analytics Card (Rows written style) */}
          {/* <Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
            <div className="flex items-center justify-between mb-2">
              <h2 className="text-sm font-medium text-gray-700 dark:text-gray-300">
                Rows written
              </h2>
              <span className="text-xs bg-red-100 text-red-600 px-2 py-1 rounded-md font-semibold">
                -3.9%
              </span>
            </div>
            <div>
              <span className="text-3xl font-bold">83,197</span>
              <span className="text-gray-400 ml-2 text-sm">from 86,580</span>
            </div>
            <div className="mt-4 h-20 relative">
              <svg viewBox="0 0 200 60" className="w-full h-full">
                <polyline
                  fill="none"
                  stroke="#c1c7d0"
                  strokeWidth="2"
                  points="0,30 20,28 40,25 60,27 80,32 100,35 120,33 140,30 160,29 180,32 200,35"
                />
                <polyline
                  fill="none"
                  stroke="#3b5bdb"
                  strokeWidth="2"
                  points="0,40 20,45 40,42 60,38 80,45 100,48 120,44 140,40 160,42 180,38 200,36"
                />
              </svg>
            </div>
            <div className="flex justify-between text-xs text-gray-400 mt-2">
              <span>16/04/2024</span>
              <span>16/05/2024</span>
            </div>
          </Card> */}
          {/* Card Last News (taille standard card) */}
          <Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
            <div className="flex justify-between items-center mb-4">
              <Title className="text-base">Curve</Title>
              <TrendingUp className="w-6 h-6" />
            </div>
            <div className="space-y-3 text-sm">
              {news.map((n, idx) => {
                return (
                  <div
                    key={idx}
                    className="flex justify-between items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
                  >
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-semibold">{n.type}</span>
                      </div>
                      <div className="ml-6">
                        <span style={{ color: n.color }}>{n.label}</span>
                        {n.trend && (
                          <span className="ml-2 text-green-600">{n.trend}</span>
                        )}
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-gray-500 text-xs">{n.date}</span>
                    </div>
                  </div>
                );
              })}
            </div>
            <div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>
            <AreaChart
              data={data}
              index="date"
              categories={["value"]}
              colors={["teal-300"]}
              className="h-16"
              showXAxis={false}
              showYAxis={false}
              showGridLines={false}
              showLegend={false}
              curve="monotone"
            />
          </Card>
          {/* Cards KPI */}
          {cards.map((card) => {
            const Icon = card.icon;
            const bar_data = [
              { label: "Invoiced", value: card.amountInvoiced },
              { label: "30 days", value: card.amount30Days },
              { label: "60 days", value: card.amount60Days },
            ];
            return (
              <Card
                key={card.id}
                className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition"
              >
                <div className="flex justify-between items-center mb-4">
                  <Title className="text-base">{card.title}</Title>
                  <Icon className="w-6 h-6" />
                </div>

                <Text className="text-3xl font-bold mb-1">{card.value}</Text>
                <Text className="text-xs text-gray-500 mb-4">{card.trend}</Text>

                <div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>
                <BarChart
                  data={bar_data}
                  index="label"
                  categories={["value"]}
                  colors={["teal", "blue", "slate"]}
                  className="h-28"
                  showLegend={false}
                  showYAxis={false}
                  showGridLines={false}
                />
                {/* <BarChart
                  data={[
                    {
                      name: "Amounts",
                      invoiced: card.amountInvoiced,
                      pay30: card.amount30Days,
                      pay60: card.amount60Days,
                    },
                  ]}
                  index="name"
                  categories={["invoiced", "pay30", "pay60"]}
                  colors={["teal", "blue", "slate"]}
                  className="h-24"
                  showXAxis={false}
                  showYAxis={false}
                  showGridLines={false}
                  showLegend={false}
                /> */}

                <button onClick={card.action} className="mt-4 text-xs text-teal-600 underline">
                  View details
                </button>
              </Card>
            );
          })}
        </div>
      </main>
    </div>
  );
}