/**
 * Collapsible personality profile section for the CreatorDetail page.
 *
 * Shows vocabulary, tone, and style markers extracted from creator transcripts.
 * Renders nothing if profile is null. Uses CSS grid-template-rows 0fr/1fr
 * for smooth collapse/expand animation (per KNOWLEDGE.md).
 */

import { useState } from "react";
import type { PersonalityProfile as ProfileType } from "../api/creators";

interface Props {
  profile: ProfileType | null;
}

export default function PersonalityProfile({ profile }: Props) {
  const [expanded, setExpanded] = useState(false);

  if (!profile) return null;

  return (
    <section className="personality-profile">
      <button
        className="personality-profile__toggle"
        onClick={() => setExpanded((v) => !v)}
        aria-expanded={expanded}
      >
        <h2 className="personality-profile__heading">Personality Profile</h2>
        <span
          className={`personality-profile__chevron${expanded ? " personality-profile__chevron--open" : ""}`}
          aria-hidden="true"
        >
          ▸
        </span>
      </button>

      <div
        className="personality-profile__collapse"
        style={{
          gridTemplateRows: expanded ? "1fr" : "0fr",
        }}
      >
        <div className="personality-profile__inner">
          {/* Summary */}
          <p className="personality-profile__summary">{profile.summary}</p>

          <div className="personality-profile__cards">
            {/* Teaching Style */}
            <div className="personality-profile__card">
              <h3 className="personality-profile__card-title">Teaching Style</h3>
              <dl className="personality-profile__dl">
                <dt>Formality</dt>
                <dd>{profile.tone.formality}</dd>
                <dt>Energy</dt>
                <dd>{profile.tone.energy}</dd>
                <dt>Teaching style</dt>
                <dd>{profile.tone.teaching_style}</dd>
                <dt>Humor</dt>
                <dd>{profile.tone.humor_frequency}</dd>
              </dl>
              {profile.tone.descriptors.length > 0 && (
                <div className="personality-profile__pills">
                  {profile.tone.descriptors.map((d) => (
                    <span key={d} className="pill pill--tag">
                      {d}
                    </span>
                  ))}
                </div>
              )}
            </div>

            {/* Vocabulary */}
            <div className="personality-profile__card">
              <h3 className="personality-profile__card-title">Vocabulary</h3>
              <dl className="personality-profile__dl">
                <dt>Jargon level</dt>
                <dd>{profile.vocabulary.technical_jargon_level}</dd>
                {profile.vocabulary.filler_words.length > 0 && (
                  <>
                    <dt>Filler words</dt>
                    <dd>{profile.vocabulary.filler_words.join(", ")}</dd>
                  </>
                )}
              </dl>
              {profile.vocabulary.signature_phrases.length > 0 && (
                <>
                  <span className="personality-profile__pill-label">
                    Signature phrases
                  </span>
                  <div className="personality-profile__pills">
                    {profile.vocabulary.signature_phrases.map((p) => (
                      <span key={p} className="pill pill--tag">
                        "{p}"
                      </span>
                    ))}
                  </div>
                </>
              )}
              {profile.vocabulary.distinctive_terms.length > 0 && (
                <>
                  <span className="personality-profile__pill-label">
                    Distinctive terms
                  </span>
                  <div className="personality-profile__pills">
                    {profile.vocabulary.distinctive_terms.map((t) => (
                      <span key={t} className="pill pill--tag">
                        {t}
                      </span>
                    ))}
                  </div>
                </>
              )}
            </div>

            {/* Style */}
            <div className="personality-profile__card">
              <h3 className="personality-profile__card-title">Style</h3>
              <dl className="personality-profile__dl">
                <dt>Explanation approach</dt>
                <dd>{profile.style_markers.explanation_approach}</dd>
                <dt>Audience engagement</dt>
                <dd>{profile.style_markers.audience_engagement}</dd>
                <dt>Self-references</dt>
                <dd>{profile.style_markers.self_references_frequency}</dd>
              </dl>
              <div className="personality-profile__booleans">
                <span
                  className={`personality-profile__bool${profile.style_markers.uses_analogies ? " personality-profile__bool--yes" : ""}`}
                >
                  {profile.style_markers.uses_analogies ? "✓" : "✗"} Uses
                  analogies
                </span>
                <span
                  className={`personality-profile__bool${profile.style_markers.uses_sound_words ? " personality-profile__bool--yes" : ""}`}
                >
                  {profile.style_markers.uses_sound_words ? "✓" : "✗"} Uses
                  sound words
                </span>
              </div>
            </div>
          </div>

          {/* Metadata */}
          <div className="personality-profile__meta">
            Based on {profile.transcript_sample_size} transcript
            {profile.transcript_sample_size !== 1 ? "s" : ""} · extracted{" "}
            {new Date(profile.extracted_at).toLocaleDateString()}
          </div>
        </div>
      </div>
    </section>
  );
}
