"use client";
import type { MailEnvelope } from "@/app/[lang]/dashboard/mail/page";
import { useDictionary } from "@/components/DictionaryContext";
import { useParams } from "next/navigation";

function timeAgo(dateStr: string, lang: string): string {
  const now = new Date();
  const d = new Date(dateStr);
  const diff = now.getTime() - d.getTime();
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return lang === "tr" ? "şimdi" : "now";
  if (mins < 60) return `${mins}${lang === "tr" ? "dk" : "m"}`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}${lang === "tr" ? "sa" : "h"}`;
  const days = Math.floor(hrs / 24);
  if (days < 7) return `${days}${lang === "tr" ? "g" : "d"}`;
  return d.toLocaleDateString(lang === "tr" ? "tr-TR" : "en-US", { day: "numeric", month: "short" });
}

function senderName(msg: MailEnvelope): string {
  const f = msg.from[0];
  return f?.name || f?.address || "Unknown";
}

export default function MessageList({ messages, loading, selectedUid, onSelect, onDelete }: {
  messages: MailEnvelope[];
  loading: boolean;
  selectedUid: number | null;
  onSelect: (uid: number) => void;
  onDelete: (uid: number) => void;
}) {
  const dict = useDictionary();
  const params = useParams();
  const lang = (params.lang as string) || "en";

  if (loading) {
    return <div className="empty-state" style={{ padding: 40 }}><span className="spinner" style={{ width: 20, height: 20 }} /></div>;
  }

  if (messages.length === 0) {
    return (
      <div className="empty-state" style={{ padding: 40 }}>
        <div style={{ fontSize: 13, color: "var(--text-muted)" }}>{dict.mailClient.emptyFolder || "Bu klasör boş"}</div>
      </div>
    );
  }

  return (
    <div className="message-list-inner">
      {messages.map((m) => (
        <div
          key={m.uid}
          className={`message-row ${selectedUid === m.uid ? "selected" : ""} ${!m.seen ? "unread" : ""}`}
          onClick={() => onSelect(m.uid)}
        >
          <div className="message-avatar">
            {senderName(m)[0]?.toUpperCase() ?? "?"}
          </div>
          <div className="message-content">
            <div className="message-top">
              <span className="message-sender">{senderName(m)}</span>
              <span className="message-time">{timeAgo(m.date, lang)}</span>
            </div>
            <div className="message-subject">{m.subject || dict.mailClient.noSubject || "(Konu Yok)"}</div>
          </div>
          {m.hasAttachments && <span className="message-attach" title={dict.mailClient.attachments || "Ekler"}>📎</span>}
        </div>
      ))}
    </div>
  );
}