"use client";

import { useEffect, useMemo, useState } from "react";

import type { Market } from "@/src/domain/types";
import { useWatchlistStore } from "@/src/stores/watchlistStore";

function normalizeCode(raw: string) {
  return raw.trim();
}

export default function WatchlistPage() {
  const { items, loading, error, refresh, add, update, remove } =
    useWatchlistStore();

  const [code, setCode] = useState("");
  const [market, setMarket] = useState<Market>("SZ");
  const [notes, setNotes] = useState("");

  useEffect(() => {
    void refresh();
  }, [refresh]);

  const canSubmit = useMemo(() => {
    return normalizeCode(code).length > 0;
  }, [code]);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-xl font-semibold">自选股</h1>
        <p className="mt-1 text-sm text-black/60 dark:text-white/60">
          MVP：添加/删除、备注、置顶（本地 IndexedDB 持久化，userId=anon）。
        </p>
      </div>

      <section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
        <div className="text-sm font-medium">添加自选股</div>

        <form
          className="mt-3 grid gap-3 md:grid-cols-6"
          onSubmit={async (e) => {
            e.preventDefault();
            if (!canSubmit) return;

            await add({
              code: normalizeCode(code),
              market,
              notes: notes.trim() || undefined,
            });

            setCode("");
            setNotes("");
          }}
        >
          <label className="md:col-span-2">
            <div className="text-xs text-black/60 dark:text-white/60">代码</div>
            <input
              value={code}
              onChange={(e) => setCode(e.target.value)}
              placeholder="例如：600519"
              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
            />
          </label>

          <label className="md:col-span-1">
            <div className="text-xs text-black/60 dark:text-white/60">市场</div>
            <select
              value={market}
              onChange={(e) => setMarket(e.target.value as Market)}
              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
            >
              <option value="SZ">SZ</option>
              <option value="SH">SH</option>
              <option value="BJ">BJ</option>
            </select>
          </label>

          <label className="md:col-span-2">
            <div className="text-xs text-black/60 dark:text-white/60">备注</div>
            <input
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="可选"
              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
            />
          </label>

          <div className="flex items-end md:col-span-1">
            <button
              type="submit"
              disabled={!canSubmit || loading}
              className="w-full rounded-lg bg-black px-3 py-2 text-sm font-medium text-white transition-opacity disabled:opacity-50 dark:bg-white dark:text-black"
            >
              添加
            </button>
          </div>
        </form>

        {error ? (
          <div className="mt-3 text-sm text-red-600 dark:text-red-400">
            {error}
          </div>
        ) : null}
      </section>

      <section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
        <div className="flex items-center justify-between gap-3">
          <div className="text-sm font-medium">列表</div>
          <button
            type="button"
            onClick={() => void refresh()}
            className="rounded-lg border border-black/10 px-3 py-2 text-xs transition-colors hover:bg-black/[.04] dark:border-white/10 dark:hover:bg-white/[.06]"
          >
            刷新
          </button>
        </div>

        <div className="mt-3 overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="text-left text-xs text-black/60 dark:text-white/60">
              <tr>
                <th className="py-2">置顶</th>
                <th className="py-2">代码</th>
                <th className="py-2">市场</th>
                <th className="py-2">备注</th>
                <th className="py-2">创建时间</th>
                <th className="py-2">操作</th>
              </tr>
            </thead>
            <tbody className="align-top">
              {items.length === 0 ? (
                <tr>
                  <td
                    className="py-6 text-xs text-black/60 dark:text-white/60"
                    colSpan={6}
                  >
                    暂无自选股
                  </td>
                </tr>
              ) : null}

              {items.map((item) => (
                <tr
                  key={item.id}
                  className="border-t border-black/5 dark:border-white/10"
                >
                  <td className="py-2">
                    <button
                      type="button"
                      className="rounded-md border border-black/10 px-2 py-1 text-xs dark:border-white/10"
                      onClick={() =>
                        void update(item.code, item.market, {
                          pinned: !item.pinned,
                        })
                      }
                      title="置顶"
                    >
                      {item.pinned ? "是" : "否"}
                    </button>
                  </td>
                  <td className="py-2 font-mono">{item.code}</td>
                  <td className="py-2">{item.market}</td>
                  <td className="py-2">
                    <input
                      defaultValue={item.notes ?? ""}
                      placeholder="（空）"
                      className="w-full rounded-md border border-black/10 bg-transparent px-2 py-1 text-xs outline-none focus:border-black/30 dark:border-white/10 dark:focus:border-white/30"
                      onBlur={(e) => {
                        const v = e.target.value.trim();
                        if ((item.notes ?? "") !== v) {
                          void update(item.code, item.market, {
                            notes: v || undefined,
                          });
                        }
                      }}
                    />
                  </td>
                  <td className="py-2 text-xs text-black/60 dark:text-white/60">
                    {new Date(item.createdAt).toLocaleString()}
                  </td>
                  <td className="py-2">
                    <button
                      type="button"
                      className="rounded-md border border-black/10 px-2 py-1 text-xs transition-colors hover:bg-black/[.04] dark:border-white/10 dark:hover:bg-white/[.06]"
                      onClick={() => void remove(item.code, item.market)}
                    >
                      删除
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {loading ? (
          <div className="mt-3 text-xs text-black/60 dark:text-white/60">
            加载中…
          </div>
        ) : null}
      </section>
    </div>
  );
}