"use client";

import { ArrowDownLeft, ArrowUpRight, BrainCircuit, MessageSquareText, Search, Siren, Sparkles } from "lucide-react";
import Link from "next/link";
import { useMemo, useState } from "react";
import type { AiLogRow } from "@/components/dashboard/data-types";
import { usePreferences } from "@/components/providers/app-providers";

export function AiLogsPage({ logs }: { logs: AiLogRow[] }) {
  const { dictionary: t, locale } = usePreferences();
  const [query, setQuery] = useState("");
  const [intent, setIntent] = useState("ALL");
  const [sentiment, setSentiment] = useState("ALL");
  const [escalated, setEscalated] = useState("ALL");
  const date = new Intl.DateTimeFormat(locale === "ar" ? "ar-EG" : "en-GB", {
    dateStyle: "medium",
    timeStyle: "short",
  });
  const intents = [...new Set(logs.map((log) => log.intent).filter((value): value is string => Boolean(value)))].sort();
  const sentiments = [...new Set(logs.map((log) => log.sentiment).filter((value): value is string => Boolean(value)))].sort();
  const filtered = useMemo(() => {
    const normalized = query.trim().toLocaleLowerCase();
    return logs.filter((log) => {
      const matchesQuery = !normalized || [
        log.orderId ?? "",
        log.customerName ?? "",
        log.customerPhone ?? "",
        log.content ?? "",
        log.transcript ?? "",
      ].some((value) => value.toLocaleLowerCase().includes(normalized));
      return matchesQuery && (intent === "ALL" || log.intent === intent) &&
        (sentiment === "ALL" || log.sentiment === sentiment) &&
        (escalated === "ALL" || String(log.escalated) === escalated);
    });
  }, [escalated, intent, logs, query, sentiment]);

  const inbound = logs.filter((log) => log.direction === "IN").length;
  const analyzed = logs.filter((log) => log.intent || log.sentiment || log.confidence !== null).length;
  const escalationCount = logs.filter((log) => log.escalated).length;
  const cards = [
    { label: t.dashboard.aiLogs.total, value: logs.length, icon: MessageSquareText, tone: "cyan" },
    { label: t.dashboard.aiLogs.inbound, value: inbound, icon: ArrowDownLeft, tone: "blue" },
    { label: t.dashboard.aiLogs.analyzed, value: analyzed, icon: Sparkles, tone: "violet" },
    { label: t.dashboard.aiLogs.escalated, value: escalationCount, icon: Siren, tone: "red" },
  ];

  return (
    <div className="data-page ai-logs-page">
      <header className="data-page-header">
        <div>
          <p className="eyebrow">{t.dashboard.aiLogs.eyebrow}</p>
          <h1>{t.dashboard.aiLogs.title}</h1>
          <p>{t.dashboard.aiLogs.description}</p>
        </div>
      </header>

      <section className="summary-grid">
        {cards.map(({ label, value, icon: Icon, tone }) => (
          <article className={`summary-card tone-${tone}`} key={label}>
            <span><Icon size={19} /></span>
            <div><small>{label}</small><strong>{value}</strong></div>
          </article>
        ))}
      </section>

      <section className="data-toolbar ai-filters" aria-label={t.dashboard.aiLogs.filters}>
        <label className="data-search">
          <Search size={16} />
          <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t.dashboard.aiLogs.search} />
        </label>
        <select value={intent} onChange={(event) => setIntent(event.target.value)} aria-label={t.dashboard.aiLogs.intent}>
          <option value="ALL">{t.dashboard.aiLogs.allIntents}</option>
          {intents.map((value) => <option key={value} value={value}>{value}</option>)}
        </select>
        <select value={sentiment} onChange={(event) => setSentiment(event.target.value)} aria-label={t.dashboard.aiLogs.sentiment}>
          <option value="ALL">{t.dashboard.aiLogs.allSentiments}</option>
          {sentiments.map((value) => <option key={value} value={value}>{value}</option>)}
        </select>
        <select value={escalated} onChange={(event) => setEscalated(event.target.value)} aria-label={t.dashboard.aiLogs.escalated}>
          <option value="ALL">{t.dashboard.aiLogs.allEscalations}</option>
          <option value="true">{t.dashboard.aiLogs.escalatedOnly}</option>
          <option value="false">{t.dashboard.aiLogs.notEscalated}</option>
        </select>
        <span className="result-count">{filtered.length} {t.dashboard.aiLogs.records}</span>
      </section>

      <section className="data-panel table-panel ai-log-panel">
        <header className="panel-heading">
          <div><BrainCircuit size={18} /><div><h2>{t.dashboard.aiLogs.tableTitle}</h2><p>{t.dashboard.aiLogs.tableSubtitle}</p></div></div>
        </header>
        <div className="data-table-wrap">
          <table className="data-table ai-log-table">
            <thead><tr>
              <th>{t.dashboard.aiLogs.time}</th>
              <th>{t.dashboard.aiLogs.order}</th>
              <th>{t.dashboard.aiLogs.channel}</th>
              <th>{t.dashboard.aiLogs.direction}</th>
              <th>{t.dashboard.aiLogs.message}</th>
              <th>{t.dashboard.aiLogs.intent}</th>
              <th>{t.dashboard.aiLogs.sentiment}</th>
              <th>{t.dashboard.aiLogs.confidence}</th>
              <th>{t.dashboard.aiLogs.escalated}</th>
            </tr></thead>
            <tbody>
              {filtered.map((log) => (
                <tr key={log.id}>
                  <td><time>{date.format(new Date(log.createdAt))}</time></td>
                  <td>{log.orderId ? <Link className="table-link mono" href={`/orders/${encodeURIComponent(log.orderId)}`}>{log.orderId}</Link> : "—"}<small>{log.customerName ?? log.customerPhone ?? "—"}</small></td>
                  <td><span className={`channel-badge channel-${log.channel.toLowerCase()}`}>{t.dashboard.aiLogs.channels[log.channel as keyof typeof t.dashboard.aiLogs.channels] ?? log.channel}</span></td>
                  <td><span className={`direction-badge direction-${log.direction.toLowerCase()}`}>
                    {log.direction === "IN" ? <ArrowDownLeft size={12} /> : <ArrowUpRight size={12} />}
                    {t.dashboard.aiLogs.directions[log.direction as keyof typeof t.dashboard.aiLogs.directions] ?? log.direction}
                  </span></td>
                  <td className="message-cell"><strong>{t.dashboard.aiLogs.messageTypes[log.messageType as keyof typeof t.dashboard.aiLogs.messageTypes] ?? log.messageType}</strong><p>{log.transcript || log.content || t.dashboard.aiLogs.noContent}</p></td>
                  <td>{log.intent ? <span className="intent-badge">{log.intent}</span> : "—"}</td>
                  <td>{log.sentiment ? <span className={`sentiment-badge sentiment-${log.sentiment.toLowerCase()}`}>{log.sentiment}</span> : "—"}</td>
                  <td>{log.confidence === null ? "—" : `${Math.round(log.confidence * 100)}%`}</td>
                  <td>{log.escalated ? <span className="escalated-yes"><Siren size={13} />{t.dashboard.aiLogs.yes}</span> : t.dashboard.aiLogs.no}</td>
                </tr>
              ))}
              {filtered.length === 0 ? <tr><td className="empty-table" colSpan={9}>{t.dashboard.aiLogs.empty}</td></tr> : null}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}