import { useState } from 'react';
import { Card } from '#/components/atoms/card.jsx';
import { HumanValue } from '#/components/molecules/human-value.jsx';
import { RecordValue } from '#/components/molecules/record-value.jsx';
import { TextLink } from '#/components/molecules/text-link.jsx';
import { recordWebLink } from '#/lib/record-link.js';

/** One record in plain language, with the full raw record a tap away. */
export function RecordCard({
  record,
  blobBase,
  repoDid,
  recordHref,
  onNavigate,
}) {
  const [raw, setRaw] = useState(false);
  const webLink = recordWebLink(record.uri, record.value);

  return (
    <Card className="mb-3 p-5">
      <HumanValue
        value={record.value}
        blobBase={blobBase}
        repoDid={repoDid}
        recordHref={recordHref}
        onNavigate={onNavigate}
        top
      />

      <div className="mt-4 border-border border-t pt-3">
        <div className="flex items-center gap-4">
          <TextLink
            className="text-[12.5px]"
            onClick={() => setRaw((open) => !open)}
          >
            {raw ? 'Hide raw record' : 'Show raw record'}
          </TextLink>
          {webLink && (
            <TextLink href={webLink} external className="text-[12.5px]">
              View on {new URL(webLink).host} ↗
            </TextLink>
          )}
        </div>
        {raw && (
          <div className="mt-3 overflow-x-auto font-mono text-[12.5px] leading-relaxed">
            <div className="flex gap-1.5">
              <span className="shrink-0 text-key">uri:</span>
              <span className="break-all text-foreground">{record.uri}</span>
            </div>
            <div className="flex gap-1.5">
              <span className="shrink-0 text-key">cid:</span>
              <span className="break-all text-foreground">{record.cid}</span>
            </div>
            <div>
              <span className="text-key">value:</span>
              <div className="ml-[2ch]">
                <RecordValue value={record.value} blobBase={blobBase} />
              </div>
            </div>
          </div>
        )}
      </div>
    </Card>
  );
}