"use client";

import { useState } from "react";
import { ExternalLink } from "lucide-react";
import { Panel } from "@/components/ui/panel";
import type { CompanyAnalysis } from "@/lib/types";

type CompanyOverviewCardProps = {
  analysis: CompanyAnalysis;
};

export function CompanyOverviewCard(props: CompanyOverviewCardProps) {
  const [expanded, setExpanded] = useState(false);

  // Get the actual business description, filtering out raw data artifacts
  const rawDescription = props.analysis.companyProfile.description;
  const isRawData = rawDescription && (
    rawDescription.includes('http://') ||
    rawDescription.includes('P1Y') ||
    rawDescription.includes('P3Y') ||
    rawDescription.includes('FY false')
  );

  const description = !rawDescription || isRawData
    ? "No business description available."
    : rawDescription;

  const needsClamp = description.length > 320;

  // Combine metadata into a single line
  const metadata = [
    props.analysis.company.ticker,
    props.analysis.company.sector ?? props.analysis.companyProfile.industry,
    props.analysis.company.cik ? `CIK ${props.analysis.company.cik}` : null,
  ].filter(Boolean).join(' · ');

  return (
    <Panel className="h-full pt-2">
      <div className="space-y-5">
        {/* Header with company name and metadata */}
        <div>
          <h2 className="text-2xl font-semibold text-[color:var(--terminal-bright)]">
            {props.analysis.company.companyName}
          </h2>
          <p className="mt-1 text-xs uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">
            {metadata}
          </p>
        </div>

        {/* Business description section */}
        <div className="border-t border-[color:var(--line-weak)] py-4">
          <div className="flex items-start justify-between gap-3">
            <div className="flex-1 min-w-0">
              <p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
                Business description
              </p>
              <p className="mt-3 text-sm leading-7 text-[color:var(--terminal-bright)]">
                {expanded || !needsClamp
                  ? description
                  : `${description.slice(0, 320).trimEnd()}...`}
              </p>
            </div>
            {props.analysis.companyProfile.website ? (
              <a
                href={props.analysis.companyProfile.website}
                target="_blank"
                rel="noreferrer"
                className="inline-flex shrink-0 items-center gap-1 text-xs uppercase tracking-[0.14em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
              >
                Website
                <ExternalLink className="size-3.5" />
              </a>
            ) : null}
          </div>
          {needsClamp ? (
            <button
              type="button"
              onClick={() => setExpanded((current) => !current)}
              className="mt-3 text-xs uppercase tracking-[0.14em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
            >
              {expanded ? "Show less" : "Read more"}
            </button>
          ) : null}
        </div>
      </div>
    </Panel>
  );
}