"use client";

import { useEffect, useState } from "react";

export interface PersonaInfo {
  slug: string;
  display_name: string;
  voice_policy: string;
  style_summary: string;
}

interface Props {
  selected: PersonaInfo | null;
  onSelect: (p: PersonaInfo) => void;
  apiBase: string;
}

export default function PersonaPicker({ selected, onSelect, apiBase }: Props) {
  const [personas, setPersonas] = useState<PersonaInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch(`${apiBase}/api/personas`)
      .then((r) => r.json())
      .then((data: PersonaInfo[]) => {
        setPersonas(data);
        setLoading(false);
      })
      .catch((e) => {
        setError(String(e));
        setLoading(false);
      });
  }, [apiBase]);

  if (loading) return <div style={styles.status}>Loading personas…</div>;
  if (error) return <div style={styles.status}>Error: {error}</div>;
  if (personas.length === 0)
    return <div style={styles.status}>No compiled personas found.</div>;

  return (
    <div style={styles.list}>
      {personas.map((p) => (
        <button
          key={p.slug}
          onClick={() => onSelect(p)}
          style={{
            ...styles.item,
            ...(selected?.slug === p.slug ? styles.selected : {}),
          }}
        >
          <span style={styles.name}>{p.display_name}</span>
          {p.style_summary && (
            <span style={styles.summary}>{p.style_summary.slice(0, 80)}…</span>
          )}
        </button>
      ))}
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  list: {
    display: "flex",
    flexDirection: "column",
    gap: "6px",
    padding: "12px",
  },
  item: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    padding: "10px 14px",
    borderRadius: "var(--radius)",
    border: "1px solid var(--border)",
    background: "var(--surface)",
    color: "var(--text)",
    textAlign: "left",
    transition: "border-color 0.15s",
    cursor: "pointer",
  },
  selected: {
    borderColor: "var(--accent)",
    background: "var(--persona-bg)",
  },
  name: {
    fontWeight: 600,
    color: "var(--accent)",
    fontSize: "14px",
  },
  summary: {
    fontSize: "12px",
    color: "var(--text-muted)",
    marginTop: "3px",
  },
  status: {
    padding: "16px",
    color: "var(--text-muted)",
    fontSize: "13px",
  },
};