import { Platform } from 'react-native';
import { createThemedStyles } from '../../theme';

// Styles for the built-in tool widgets and their shared primitives. Authored in
// the same dark hex palette as conversationStyles so every color resolves to
// the matching design-system token in both schemes (see ../../theme.ts).
export const toolWidgetStyles = createThemedStyles({
  // ── Widget row (the slim ToolUIBase-like header) ────────────────────────
  row: { width: '100%' },
  rowHeader: { alignItems: 'flex-start', flexDirection: 'row', minHeight: 30, width: '100%' },
  // The icon stays in its own fixed column (top-aligned); the wrapping content
  // lives in rowHeaderContent so wrapped items align under the title, not under
  // the icon.
  rowHeaderPressable: { alignItems: 'flex-start', flex: 1, flexDirection: 'row', minHeight: 30 },
  // Title/chip/note/chevron. flexWrap lets the chip/note/chevron drop to a
  // second line on narrow screens — aligned under the title — instead of
  // squeezing every part into a sliver; columnGap/rowGap space them evenly.
  rowHeaderContent: {
    alignItems: 'center',
    columnGap: 8,
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    minHeight: 30,
    rowGap: 2,
  },
  rowIcon: { alignItems: 'center', height: 30, justifyContent: 'center', marginRight: 8, width: 24 },
  // flexShrink:1 lets a long variable title (e.g. grep's `Searching "…"...`)
  // ellipsize instead of overflowing; short fixed labels ("Searched for") still
  // stay whole because the chip/note wrap to the next line before the title
  // would shrink.
  rowTitle: { color: '#F4F4F5', flexShrink: 1, fontSize: 15, fontWeight: '800' },
  rowNote: { color: '#8E8E93', fontSize: 12, fontStyle: 'italic' },
  rowChevron: {},
  rowChevronOpen: { transform: [{ rotate: '90deg' }] },
  rowBody: { paddingBottom: 4, paddingLeft: 32, paddingTop: 2 },
  rowFailureText: { color: '#FCA5A5', fontSize: 12, lineHeight: 17 },
  // File chip mirrors the web's gray path pill (bg-gray-200 rounded text-xs).
  fileChip: {
    backgroundColor: '#181818',
    borderColor: '#303035',
    borderRadius: 8,
    borderWidth: 1,
    flexShrink: 1,
    paddingHorizontal: 6,
    paddingVertical: 2,
  },
  fileChipText: {
    color: '#C7C7CC',
    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
    fontSize: 12,
    fontWeight: '700',
  },

  // ── Card container (bordered widget surface, matches toolCallItem) ──────
  card: {
    backgroundColor: '#101010',
    borderColor: '#29292E',
    borderRadius: 13,
    borderWidth: 1,
    padding: 11,
    width: '100%',
  },

  // ── Expandable section ───────────────────────────────────────────────────
  sectionHeader: { alignItems: 'center', alignSelf: 'flex-start', flexDirection: 'row', minHeight: 26, paddingVertical: 2 },
  sectionHeaderText: { color: '#A1A1AA', fontSize: 12, fontWeight: '700' },
  sectionHeaderMonoText: {
    color: '#A1A1AA',
    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
    fontSize: 12,
    fontWeight: '700',
  },
  sectionChevron: { marginRight: 5 },
  sectionChevronOpen: { marginRight: 5, transform: [{ rotate: '90deg' }] },
  sectionBody: { marginTop: 4, width: '100%' },

  // ── Code block (sunken, monospace, both-axis scrollable) ────────────────
  codeBlock: {
    backgroundColor: '#070707',
    borderColor: '#242429',
    borderRadius: 11,
    borderWidth: 1,
    overflow: 'hidden',
    width: '100%',
  },
  codeBlockVerticalScroll: { maxHeight: 220, width: '100%' },
  codeBlockHorizontalScroll: { width: '100%' },
  codeBlockContent: { paddingHorizontal: 10, paddingVertical: 9 },
  codeBlockText: {
    color: '#D4D4D8',
    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
    fontSize: 12,
    lineHeight: 18,
  },
  codeBlockErrorText: { color: '#FCA5A5' },
  codeBlockError: { backgroundColor: '#241111', borderColor: '#5F2424' },

  // ── Diff view ────────────────────────────────────────────────────────────
  diffWrap: {
    backgroundColor: '#070707',
    borderColor: '#242429',
    borderRadius: 11,
    borderWidth: 1,
    overflow: 'hidden',
    width: '100%',
  },
  diffVerticalScroll: { maxHeight: 260, width: '100%' },
  diffHorizontalScroll: { width: '100%' },
  diffContent: { flexDirection: 'column', minWidth: '100%', paddingVertical: 6 },
  diffLine: { flexDirection: 'row', minWidth: '100%', paddingHorizontal: 10, paddingVertical: 1 },
  diffLineAdded: { backgroundColor: '#11251A' },
  diffLineRemoved: { backgroundColor: '#241111' },
  diffLineSign: {
    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
    fontSize: 12,
    lineHeight: 18,
    width: 14,
  },
  diffLineText: {
    // flexShrink:0 keeps the text at its intrinsic single-line width instead of
    // being squeezed to the row width (which forced wrapping and left nothing
    // for the horizontal ScrollView to scroll).
    flexShrink: 0,
    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
    fontSize: 12,
    lineHeight: 18,
  },
  diffTextAdded: { color: '#86EFAC' },
  diffTextRemoved: { color: '#FCA5A5' },
  diffTextContext: { color: '#A1A1AA' },

  // ── Approval card (entity approvals / batch approval) ───────────────────
  approvalHeader: { alignItems: 'center', flexDirection: 'row', gap: 9 },
  // Analog of the web PulsingIndicator's blue attention dot (info-tier blue
  // passes through both schemes untouched — it isn't a mapped surface hex).
  approvalDot: { backgroundColor: '#93C5FD', borderRadius: 5, height: 10, width: 10 },
  approvalDivider: { borderTopColor: '#29292E', borderTopWidth: 1, marginBottom: 9, marginTop: 10 },
  approvalActions: {
    alignItems: 'center',
    borderTopColor: '#29292E',
    borderTopWidth: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    paddingTop: 10,
  },
  approvalItem: { alignItems: 'flex-start', flexDirection: 'row', paddingVertical: 4 },
  approvalItemBody: { flex: 1, minWidth: 0 },
  approvalSummaryText: { color: '#D4D4D8', fontSize: 13, lineHeight: 18, paddingVertical: 4 },
  approvalCheckbox: {
    alignItems: 'center',
    borderColor: '#3F3F46',
    borderRadius: 6,
    borderWidth: 2,
    height: 20,
    justifyContent: 'center',
    marginRight: 10,
    marginTop: 3,
    width: 20,
  },
  approvalCheckboxChecked: { backgroundColor: '#F4F4F5', borderColor: '#F4F4F5' },

  // ── Meta line + result links (search/web/docs widgets) ──────────────────
  // Sub-line under a widget header ("Found 3 results in 2 files", "Format:
  // markdown") — the web's text-xs text-gray-500.
  metaText: { color: '#8E8E93', fontSize: 12, lineHeight: 17 },
  metaTextStrong: { color: '#A1A1AA', fontWeight: '700' },
  // Search-result link list (web: max-h-48 scrollable column of icon+text rows).
  linkListScroll: { maxHeight: 192, width: '100%' },
  linkList: { gap: 3, width: '100%' },
  linkRow: { alignItems: 'center', flexDirection: 'row', minHeight: 22 },
  linkRowIcon: { marginRight: 6 },
  linkRowText: { color: '#A1A1AA', flexShrink: 1, fontSize: 12 },

  // ── Interactive widgets (clarifying questions, permissions, payments) ────
  interactiveHeader: { alignItems: 'flex-start', flexDirection: 'row', gap: 8, justifyContent: 'space-between' },
  interactiveTitle: { color: '#F4F4F5', flex: 1, fontSize: 16, fontWeight: '900', marginBottom: 6 }, // DS Heading h4
  interactiveCounter: { color: '#D4D4D8', fontSize: 14 },
  interactiveBodyText: { color: '#A1A1AA', fontSize: 13, lineHeight: 18 },
  optionScroll: { flexShrink: 1 }, // no flexGrow: shrinks for the card's maxHeight cap, keeps header/nav at natural size
  optionList: { gap: 6, marginTop: 12 }, // DS optionsGroup gap-space-1-5, body gap-space-3
  // DS ClickableCard skin="stone" padding="md": filled stone card, light stroke.
  // flex-start keeps the indicator on the label's first line when the option
  // wraps or carries a description (DS optionRowWithDescription).
  optionRow: {
    alignItems: 'flex-start',
    backgroundColor: '#312D2A',
    borderColor: '#2A2A2E',
    borderRadius: 6,
    borderWidth: 1,
    flexDirection: 'row',
    gap: 12,
    padding: 16,
  },
  optionRowCentered: { alignItems: 'center' },
  optionRowSelected: { borderColor: '#F4F4F5' },
  optionBody: { flex: 1, minWidth: 0 },
  optionLabel: { color: '#F4F4F5', fontSize: 14, fontWeight: '500' }, // DS text-small-medium
  optionSubtitle: { color: '#D4D4D8', fontSize: 14, marginTop: 2 },
  optionImage: { aspectRatio: 4 / 3, borderRadius: 8, marginTop: 8, width: '100%' },
  radioOuter: {
    alignItems: 'center',
    borderColor: '#3F3F46',
    borderRadius: 9,
    borderWidth: 2,
    height: 18,
    justifyContent: 'center',
    width: 18,
  },
  radioOuterSelected: { borderColor: '#F4F4F5' },
  radioInner: { backgroundColor: '#F4F4F5', borderRadius: 4, height: 8, width: 8 },
  wizardNavRow: { alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', marginTop: 12 },
  wizardNavGroup: { alignItems: 'center', flexDirection: 'row', gap: 6 },
  // DS Button size="sm" (h 30, px-space-3, text-small-medium).
  widgetButtonSmall: { minHeight: 30, paddingHorizontal: 12 },
  widgetButtonSmallLabel: { fontSize: 14, fontWeight: '500' },
  // DS tiny ghost icon button (pager chevrons, minimize toggle).
  widgetIconButtonTiny: { alignItems: 'center', height: 24, justifyContent: 'center', width: 24 },
  textButton: { paddingHorizontal: 8, paddingVertical: 6 },
  textButtonLabel: { color: '#A1A1AA', fontSize: 13, fontWeight: '600' },
  fieldErrorText: { color: '#FCA5A5', fontSize: 12, marginTop: 3 },
  linkText: { color: '#93C5FD', fontSize: 12, marginTop: 8 },
  prdTitle: { color: '#F4F4F5', fontSize: 15, fontWeight: '700', marginBottom: 4 },
  prdToggleText: { color: '#93C5FD', fontSize: 12, fontWeight: '600', marginTop: 6 },
  answeredQuestionList: { gap: 4 },
  answeredQuestionText: { color: '#A1A1AA', fontSize: 13, lineHeight: 18 },
  // DS ClarifyingQuestionsCard panel: sunken surface, rounded-md, p-space-4.
  clarifyingCard: { backgroundColor: '#080808', borderRadius: 6, padding: 16, width: '100%' },
  clarifyingCustomInput: { backgroundColor: 'transparent', borderRadius: 6 },
  // marginBottom lifts the gap to the first option to the DS body's space-3.
  clarifyingQuestionDescription: { color: '#D4D4D8', fontSize: 14, marginBottom: 6 },

  // ── Key/value list ───────────────────────────────────────────────────────
  keyValueList: { gap: 6, width: '100%' },
  keyValueRow: { flexDirection: 'row', width: '100%' },
  keyValueLabel: { color: '#8E8E93', fontSize: 12, fontWeight: '700', marginRight: 10, minWidth: 90 },
  keyValueValue: { color: '#D4D4D8', flex: 1, fontSize: 12, lineHeight: 17 },

  // ── Console-ish log lines (execute_code) ────────────────────────────────
  logLines: { gap: 2, marginTop: 6, width: '100%' },
  logLine: { flexDirection: 'row', width: '100%' },
  logLineMarker: {
    color: '#73737A',
    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
    fontSize: 12,
    lineHeight: 17,
    marginRight: 6,
  },
  logLineText: {
    color: '#A1A1AA',
    flex: 1,
    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
    fontSize: 12,
    lineHeight: 17,
  },
  widgetBodyGap: { gap: 8, marginTop: 6 },

  // ── Automation / workflow / blueprint cards ─────────────────────────────
  cardBody: { gap: 10, width: '100%' },
  cardHeader: { alignItems: 'center', flexDirection: 'row', gap: 10, width: '100%' },
  cardHeaderTop: { alignItems: 'flex-start' },
  cardIconBox: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderRadius: 8,
    height: 28,
    justifyContent: 'center',
    width: 28,
  },
  cardHeaderMeta: { flex: 1, minWidth: 0 },
  cardTitleRow: { alignItems: 'center', columnGap: 8, flexDirection: 'row', flexWrap: 'wrap', rowGap: 4 },
  cardTitle: { color: '#F4F4F5', flexShrink: 1, fontSize: 14, fontWeight: '700' },
  cardSubtitle: { color: '#8E8E93', fontSize: 12, marginTop: 1 },
  cardDescription: { color: '#D4D4D8', fontSize: 12, lineHeight: 17 },
  cardKicker: { color: '#8E8E93', fontSize: 10, fontWeight: '800', letterSpacing: 1, textTransform: 'uppercase' },
  cardFooterRow: { alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 8, justifyContent: 'space-between', width: '100%' },
  statusBadge: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderRadius: 999,
    flexDirection: 'row',
    gap: 3,
    paddingHorizontal: 7,
    paddingVertical: 2,
  },
  statusBadgeText: { color: '#A1A1AA', fontSize: 11, fontWeight: '700' },
  statusBadgeActive: { backgroundColor: '#11251A' },
  statusBadgeActiveText: { color: '#86EFAC', fontSize: 11, fontWeight: '700' },
  footerPill: {
    alignItems: 'center',
    backgroundColor: '#181818',
    borderColor: '#303035',
    borderRadius: 999,
    borderWidth: 1,
    flexDirection: 'row',
    flexShrink: 1,
    gap: 4,
    paddingHorizontal: 8,
    paddingVertical: 3,
  },
  footerPillText: { color: '#A1A1AA', flexShrink: 1, fontSize: 11, fontWeight: '600' },

  // ── Blueprint pills + detail panel ───────────────────────────────────────
  pillRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, width: '100%' },
  pill: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: 'transparent',
    borderRadius: 999,
    borderWidth: 1,
    flexDirection: 'row',
    gap: 4,
    paddingHorizontal: 8,
    paddingVertical: 4,
  },
  pillActive: { backgroundColor: '#1F1F23', borderColor: '#2A2A2A' },
  pillText: { color: '#D4D4D8', fontSize: 11, fontWeight: '600' },
  pillCount: { color: '#8E8E93', fontSize: 11, fontWeight: '700' },
  panel: { backgroundColor: '#151515', borderRadius: 8, gap: 4, padding: 9, width: '100%' },
  panelText: { color: '#A1A1AA', fontSize: 12, lineHeight: 17 },
  panelItemHeader: { alignItems: 'flex-start', flexDirection: 'row', gap: 4 },
  panelItemChevron: { marginTop: 2 },
  panelItemChevronOpen: { marginTop: 2, transform: [{ rotate: '90deg' }] },
  panelItemTitle: { color: '#D4D4D8', flexShrink: 1, fontSize: 12, fontWeight: '600', lineHeight: 17 },
  panelItemDescription: { color: '#A1A1AA', fontSize: 12, lineHeight: 17, paddingLeft: 18 },
  cardDivider: { backgroundColor: '#242424', height: 1, width: '100%' },

  // ── Artifact WebView preview ─────────────────────────────────────────────
  rowAction: { paddingLeft: 8 },
  // Same sunken chrome as codeBlock; fixed height keeps chat rows bounded —
  // the fullscreen viewer is the place to scroll the full artifact.
  artifactPreviewBox: {
    backgroundColor: '#070707',
    borderColor: '#242429',
    borderRadius: 11,
    borderWidth: 1,
    height: 240,
    marginTop: 6,
    overflow: 'hidden',
    width: '100%',
  },
  artifactFrameFill: { flex: 1, width: '100%' },
  // Transparent so the shell document's own themed background paints without
  // a white flash in dark mode.
  artifactWebView: { backgroundColor: 'transparent', flex: 1 },
  artifactPreviewLoading: {
    alignItems: 'center',
    backgroundColor: '#070707',
    bottom: 0,
    justifyContent: 'center',
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  },

  // ── Image grid (borrowed from SendImageGallery's tiles) ─────────────────
  imageGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, width: '100%' },
  imageGridSingle: {
    alignSelf: 'flex-start',
    backgroundColor: '#171717',
    borderColor: '#2A2A2A',
    borderRadius: 12,
    borderWidth: 1,
    maxWidth: 320,
    overflow: 'hidden',
    width: '100%',
  },
  imageGridSingleImage: { aspectRatio: 1.5, width: '100%' },
  imageGridTile: {
    aspectRatio: 4 / 3,
    backgroundColor: '#171717',
    borderColor: '#2A2A2A',
    borderRadius: 10,
    borderWidth: 1,
    overflow: 'hidden',
    width: '48%',
  },
  imageGridTileImage: { height: '100%', width: '100%' },
  imageGridCaption: { color: '#8E8E93', fontSize: 11, fontWeight: '700', marginTop: 4 },
  // Lightbox stays dark in both schemes (rgba is not theme-mapped).
  imageLightboxBackdrop: { alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.95)', flex: 1, justifyContent: 'center' },
  imageLightboxImage: { height: '80%', width: '100%' },
  imageLightboxClose: {
    backgroundColor: 'rgba(255,255,255,0.1)',
    borderRadius: 20,
    padding: 9,
    position: 'absolute',
    right: 16,
    top: 48,
  },
});