import { StyleSheet } from 'react-native';
import { createThemedStyles } from './theme';
import { fontFamily } from './tokens';

export const styles = createThemedStyles({
  safeArea: { flex: 1, backgroundColor: '#000000' },
  container: { paddingBottom: 34, paddingHorizontal: 14, paddingTop: 10 },
  homeTopBar: {
    alignItems: 'center',
    borderBottomColor: '#101012',
    borderBottomWidth: 1,
    flexDirection: 'row',
    minHeight: 62,
    paddingHorizontal: 14,
    paddingVertical: 8,
  },
  topBarSide: {
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: 52,
  },
  topBarRight: { alignItems: 'flex-end' },
  topBarTitleWrap: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    minWidth: 0,
  },
  topBarTitle: { color: '#F7F7F7', fontSize: 17, fontWeight: '900', letterSpacing: 0, lineHeight: 21 },
  homeTitle: {
    color: '#FAFAFA',
    fontFamily: fontFamily.display,
    fontSize: 26,
    fontWeight: '900',
    letterSpacing: -0.9,
    marginBottom: 24,
    marginTop: 36,
    textAlign: 'center',
  },
  header: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    minHeight: 64,
    paddingBottom: 10,
    paddingTop: 4,
  },
  headerAccessory: { flexShrink: 0, marginLeft: 12 },
  eyebrow: { color: '#8E8E93', fontSize: 12, fontWeight: '800', marginTop: 2 },
  title: { color: '#F7F7F7', fontSize: 24, fontWeight: '900', letterSpacing: 0, lineHeight: 29 },
  subtitle: { color: '#A1A1AA', fontSize: 14, fontWeight: '600', lineHeight: 20, marginTop: 5 },
  headerAvatar: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 22,
    borderWidth: 1,
    height: 44,
    justifyContent: 'center',
    width: 44,
  },
  loadingPanel: {
    alignItems: 'center',
    backgroundColor: '#0B0B0C',
    borderColor: '#242427',
    borderRadius: 16,
    borderWidth: 1,
    padding: 32,
  },
  heroPanel: {
    alignItems: 'center',
    backgroundColor: '#0B0B0C',
    borderColor: '#242427',
    borderRadius: 16,
    borderWidth: 1,
    overflow: 'hidden',
    padding: 18,
  },
  heroTopRow: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 16,
  },
  heroLabel: { color: '#8E8E93', fontSize: 11, fontWeight: '900', textTransform: 'uppercase' },
  agentCard: {
    alignItems: 'flex-start',
    flexDirection: 'row',
  },
  avatar: {
    alignItems: 'center',
    height: 52,
    justifyContent: 'center',
    width: 52,
  },
  avatarText: { color: '#F7F7F7', fontSize: 18, fontWeight: '900' },
  agentCardBody: { flex: 1, marginLeft: 13, minWidth: 0 },
  agentName: { color: '#F7F7F7', fontSize: 16, fontWeight: '900', lineHeight: 20 },
  agentDescription: { color: '#BDBDC2', fontSize: 14, fontWeight: '600', lineHeight: 20, marginTop: 7 },
  chevron: { color: '#8E8E93', fontSize: 20, fontWeight: '900' },
  agentMetaRow: { flexDirection: 'row', flexWrap: 'wrap', marginLeft: 65, marginTop: 14 },
  agentMetaPill: {
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 13,
    borderWidth: 1,
    marginRight: 7,
    marginTop: 7,
    paddingHorizontal: 10,
    paddingVertical: 6,
  },
  agentMetaText: { color: '#D4D4D8', fontSize: 12, fontWeight: '800' },
  emptyPanel: {
    backgroundColor: '#0B0B0C',
    borderColor: '#242427',
    borderRadius: 16,
    borderWidth: 1,
    padding: 16,
  },
  emptyTitle: { color: '#F7F7F7', fontFamily: fontFamily.display, fontSize: 23, fontWeight: '900', lineHeight: 28, marginTop: 15 },
  emptyBody: { color: '#BDBDC2', fontSize: 14, fontWeight: '600', lineHeight: 21, marginTop: 8 },
  emptyChipRow: { flexDirection: 'row', flexWrap: 'wrap', marginTop: 14 },
  emptyChip: {
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 15,
    borderWidth: 1,
    marginRight: 7,
    marginTop: 7,
    paddingHorizontal: 11,
    paddingVertical: 7,
  },
  emptyChipText: { color: '#D4D4D8', fontSize: 12, fontWeight: '800' },
  primaryButton: {
    alignItems: 'center',
    backgroundColor: '#F4F4F5',
    borderRadius: 17,
    justifyContent: 'center',
    marginTop: 20,
    minHeight: 50,
    paddingHorizontal: 18,
  },
  primaryButtonText: { color: '#111111', fontSize: 16, fontWeight: '900' },
  // Overrides primaryButton's marginTop so the card's continue button sits 12px
  // below the agent description (no meta pills between them anymore).
  heroContinueButton: { marginTop: 12 },
  secondaryButton: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 16,
    borderWidth: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 14,
    minHeight: 46,
    paddingHorizontal: 16,
  },
  secondaryButtonText: { color: '#F4F4F5', fontSize: 14, fontWeight: '900', marginLeft: 7 },
  linkButton: {
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 14,
    paddingVertical: 12,
  },
  linkButtonText: { color: '#FF5A1F', fontSize: 14, fontWeight: '900' },
  recentSection: { marginTop: 22 },
  sectionHeader: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  sectionTitle: { color: '#F4F4F5', fontSize: 17, fontWeight: '900' },
  sectionCount: { color: '#73737A', fontSize: 12, fontWeight: '900' },
  agentRow: {
    alignItems: 'center',
    backgroundColor: '#0B0B0C',
    borderColor: '#242427',
    borderRadius: 16,
    borderWidth: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 9,
    minHeight: 68,
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
  agentRowBody: { flex: 1, marginLeft: 11, minWidth: 0 },
  agentRowName: { color: '#F4F4F5', fontSize: 15, fontWeight: '900' },
  agentRowDescription: { color: '#8E8E93', fontSize: 12, fontWeight: '600', lineHeight: 17, marginTop: 3 },
  compactAvatar: {
    alignItems: 'center',
    height: 38,
    justifyContent: 'center',
    width: 38,
  },
  // --- Continue card (web "Pick up where you left off" hero) ---
  cardHeaderRow: { alignItems: 'center', flexDirection: 'row', width: '100%' },
  cardAvatar: { alignItems: 'center', height: 40, justifyContent: 'center', width: 40 },
  cardHeaderText: { flexShrink: 1, marginLeft: 6, minWidth: 0 },
  agentActiveTime: { color: '#8E8E93', fontSize: 14, fontWeight: '600', lineHeight: 20, marginTop: 2 },
  messagePanel: {
    backgroundColor: '#121214',
    borderColor: '#1B1B1D',
    borderRadius: 12,
    borderWidth: 1,
    marginTop: 16,
    overflow: 'hidden',
    padding: 18,
    width: '100%',
  },
  bubbleGroup: { marginTop: 16 },
  bubbleLabelRow: { alignItems: 'center', flexDirection: 'row' },
  rowEnd: { justifyContent: 'flex-end' },
  rowStart: { justifyContent: 'flex-start' },
  bubbleLabel: { color: '#F7F7F7', fontSize: 14, lineHeight: 18, marginHorizontal: 6 },
  bubbleLabelAgent: { fontWeight: '700' },
  bubbleLabelUser: { fontWeight: '600' },
  bubbleRow: { flexDirection: 'row', marginTop: 8 },
  bubbleRowUser: { paddingRight: 25 },
  bubbleRowAgent: { paddingLeft: 20 },
  bubble: {
    maxWidth: '88%',
    paddingHorizontal: 18,
    paddingVertical: 13,
    shadowColor: '#919191',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.06,
    shadowRadius: 10,
  },
  assistantBubble: {
    backgroundColor: '#0A0A0A',
    borderBottomLeftRadius: 13,
    borderBottomRightRadius: 13,
    borderTopLeftRadius: 3,
    borderTopRightRadius: 13,
  },
  userBubble: {
    backgroundColor: '#161614',
    borderBottomLeftRadius: 13,
    borderBottomRightRadius: 13,
    borderColor: '#201E1A',
    borderTopLeftRadius: 13,
    borderTopRightRadius: 3,
    borderWidth: 1,
  },
  bubbleText: { color: '#F7F7F7', fontSize: 14, lineHeight: 20 },
  continueButton: {
    alignItems: 'center',
    alignSelf: 'center',
    backgroundColor: '#F4F4F5',
    borderRadius: 9,
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 16,
    paddingHorizontal: 14,
    paddingVertical: 9,
  },
  continueButtonText: { color: '#111111', fontSize: 14, fontWeight: '700', marginRight: 6 },
  createRow: { alignItems: 'center', flexDirection: 'row', justifyContent: 'center', marginTop: 14 },
  orText: { color: '#8E8E93', fontSize: 14, fontWeight: '600', marginRight: 8 },
  createLinkText: { color: '#F7F7F7', fontSize: 14, fontWeight: '600', textDecorationLine: 'underline' },
  // --- Recent Superagents (web horizontal cards) ---
  recentHeader: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 12,
    paddingHorizontal: 2,
  },
  recentHeading: { color: '#F7F7F7', fontSize: 16, fontWeight: '800', letterSpacing: -0.3 },
  recentScrollContent: { paddingRight: 14 },
  recentCard: {
    alignItems: 'center',
    backgroundColor: '#0B0B0C',
    borderColor: '#242427',
    borderRadius: 12,
    borderWidth: 1,
    flexDirection: 'row',
    height: 66,
    marginRight: 12,
    paddingHorizontal: 10,
    width: 200,
  },
  recentCardBody: { flex: 1, marginLeft: 10, minWidth: 0 },
  recentCardName: { color: '#F7F7F7', fontSize: 14, fontWeight: '800', letterSpacing: -0.3 },
  recentCardTime: { color: '#8E8E93', fontSize: 12, fontWeight: '600', marginTop: 4 },
  // --- Chat-list home (WhatsApp-style conversation list) ---
  screenTitle: {
    color: '#F7F7F7',
    fontFamily: fontFamily.display,
    fontSize: 28,
    fontWeight: '800',
    letterSpacing: -0.6,
    paddingBottom: 10,
    paddingHorizontal: 16,
    paddingTop: 10,
  },
  // Screen-level safe-area wrapper (transparent; the shell paints the canvas).
  homeSafeArea: { flex: 1 },
  // Surfaces are transparent so the screen background (safeArea) shows through.
  chatListScroll: { flex: 1 },
  chatListContent: { paddingBottom: 28, paddingTop: 2 },
  cardPressed: { opacity: 0.7 },
  // Folder filter chip bar (container styles; chip styling is below).
  chipsBar: { paddingBottom: 12, paddingTop: 16 },
  chipsContent: { gap: 8, paddingHorizontal: 16 },
  // Folder filter chips — DS chip (borderless, filled): selected is a stronger
  // stone fill with default text, not a dark pill.
  // minHeight (not a fixed height) + vertical padding so the chip grows with
  // larger accessibility text sizes instead of clipping the label.
  folderChip: { alignItems: 'center', borderRadius: 100, justifyContent: 'center', minHeight: 30, paddingHorizontal: 14, paddingVertical: 6 },
  folderChipUnselected: { backgroundColor: '#505050' }, // → chipFill
  folderChipSelected: { backgroundColor: '#929292' }, // → chipFillActive
  folderChipText: { color: '#F7F7F7', fontSize: 14, fontWeight: '500', letterSpacing: -0.2 },
  // Selected fill (chipFillActive) is a light/mid stone in BOTH schemes, so the
  // selected label uses an always-dark on-surface foreground (#111827 → onWhite)
  // for contrast — the default light foreground would be low-contrast on it.
  folderChipTextSelected: { color: '#111827' },
  // Conversation rows
  convRow: { alignItems: 'center', backgroundColor: 'transparent', flexDirection: 'row', paddingLeft: 16 },
  convRowPressed: { backgroundColor: '#2A2A2A' },
  convAvatar: { alignItems: 'center', height: 44, justifyContent: 'center', width: 44 },
  convBody: {
    borderBottomColor: '#1F1F23',
    borderBottomWidth: 1,
    flex: 1,
    marginLeft: 12,
    paddingRight: 16,
    paddingVertical: 14,
  },
  convTopLine: { alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between' },
  convName: { color: '#F7F7F7', flexShrink: 1, fontSize: 16, fontWeight: '700', letterSpacing: -0.3, marginRight: 8 },
  convTime: { color: '#8E8E93', fontSize: 13, fontWeight: '500' },
  convSnippet: { color: '#8E8E93', fontSize: 14, fontWeight: '500', lineHeight: 20, marginTop: 4 },
  // Create-new-agent row (last item) — plain row like the agent rows, with a
  // chip-fill plus tile (stone-200 in light / neutral-600 in dark, same as the
  // folder chips) instead of the action-primary fill, which flipped to
  // near-black in light mode.
  createAgentRow: { alignItems: 'center', backgroundColor: 'transparent', flexDirection: 'row', paddingLeft: 16, paddingVertical: 14, marginBottom: 25 },
  createAgentRowIcon: {
    alignItems: 'center',
    backgroundColor: '#505050', // → chipFill
    borderRadius: 8,
    height: 44,
    justifyContent: 'center',
    width: 44,
  },
  createAgentRowBody: { flex: 1, marginLeft: 12, minWidth: 0 },
  createAgentRowTitle: { color: '#F7F7F7', fontSize: 16, fontWeight: '700', letterSpacing: -0.3 },
  createAgentRowSubtitle: { color: '#8E8E93', fontSize: 14, fontWeight: '500', marginTop: 2 },
  // --- Agent actions: bottom sheet + confirm dialog ---
  sheetRoot: { flex: 1, justifyContent: 'flex-end' },
  sheetBackdrop: {
    backgroundColor: 'rgba(0,0,0,0.45)',
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  },
  sheetPanel: {
    backgroundColor: '#0B0B0C',
    borderTopLeftRadius: 22,
    borderTopRightRadius: 22,
    paddingBottom: 34,
    paddingHorizontal: 12,
    paddingTop: 10,
  },
  sheetHandle: {
    alignSelf: 'center',
    backgroundColor: '#2A2A2A',
    borderRadius: 3,
    height: 5,
    marginBottom: 10,
    width: 40,
  },
  sheetTitle: {
    color: '#8E8E93',
    fontSize: 13,
    fontWeight: '700',
    paddingBottom: 6,
    paddingHorizontal: 12,
    paddingTop: 4,
  },
  sheetAction: { alignItems: 'center', borderRadius: 12, flexDirection: 'row', paddingHorizontal: 12, paddingVertical: 14 },
  sheetRowPressed: { backgroundColor: '#151515' },
  sheetActionIcon: { alignItems: 'center', justifyContent: 'center', marginRight: 14, width: 24 },
  sheetActionLabel: { color: '#F7F7F7', fontSize: 16, fontWeight: '700' },
  sheetActionDestructive: { color: '#FF6B6B' },
  sheetCancel: { alignItems: 'center', borderRadius: 12, marginTop: 6, paddingVertical: 14 },
  sheetCancelText: { color: '#8E8E93', fontSize: 16, fontWeight: '800' },
  confirmBackdrop: {
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
    flex: 1,
    justifyContent: 'center',
    padding: 28,
  },
  confirmCard: {
    backgroundColor: '#0B0B0C',
    borderColor: '#242427',
    borderRadius: 18,
    borderWidth: 1,
    maxWidth: 360,
    padding: 20,
    width: '100%',
  },
  confirmTitle: { color: '#F7F7F7', fontSize: 18, fontWeight: '900', letterSpacing: -0.3 },
  confirmBody: { color: '#BDBDC2', fontSize: 15, fontWeight: '600', lineHeight: 21, marginTop: 8 },
  confirmButtons: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 20 },
  confirmBtn: { alignItems: 'center', borderRadius: 12, justifyContent: 'center', minHeight: 44, minWidth: 96, paddingHorizontal: 18 },
  confirmBtnCancel: { backgroundColor: '#151515', marginRight: 10 },
  confirmBtnCancelText: { color: '#F7F7F7', fontSize: 15, fontWeight: '800' },
  confirmBtnDanger: { backgroundColor: '#DC2626' },
  confirmBtnPrimary: { backgroundColor: '#FF5A1F' },
  confirmBtnConfirmText: { fontSize: 15, fontWeight: '800' },
  chatEmptyWrap: { alignItems: 'center', flex: 1, justifyContent: 'center', padding: 24 },
  chatEmptyHint: { color: '#8E8E93', fontSize: 14, fontWeight: '600', marginTop: 8, paddingHorizontal: 24, textAlign: 'center' },
  // --- No-agents hero (mirrors DS web superagent home: DsAgentHero) ---
  heroScreenBg: { backgroundColor: '#f1eeea' },
  heroBlock: { alignItems: 'center', justifyContent: 'center', paddingBottom: 8, paddingHorizontal: 20, paddingTop: 16 },
  heroTitleBlock: { alignItems: 'center', marginBottom: 28 },
  heroTitleLine: { alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center' },
  heroTitleText: { color: '#F7F7F7', fontFamily: fontFamily.display, fontSize: 28, fontWeight: '800', letterSpacing: -0.8, lineHeight: 32, textAlign: 'center' },
  heroAccentText: { color: '#3950E6', fontFamily: fontFamily.display, fontSize: 28, fontWeight: '800', letterSpacing: -0.8, lineHeight: 32 },
  heroSphere: { marginRight: 8 },
  heroComposer: {
    backgroundColor: '#111111',
    borderColor: '#242427',
    borderRadius: 8,
    borderWidth: 1,
    paddingBottom: 12,
    paddingHorizontal: 16,
    paddingTop: 14,
    width: '100%',
  },
  heroComposerInput: { color: '#F7F7F7', fontSize: 16, fontWeight: '400', lineHeight: 22, minHeight: 48, textAlignVertical: 'top' },
  // Connector chips shown in the composer after an idea fills it (removable).
  // DS FileAttachment parity: light bordered pill with brand icon + name + ✕.
  composerConnectorRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 12 },
  composerConnectorChip: {
    alignItems: 'center',
    backgroundColor: '#0B0B0C',
    borderColor: '#242427',
    borderRadius: 10,
    borderWidth: 1,
    flexDirection: 'row',
    gap: 8,
    paddingLeft: 8,
    paddingRight: 8,
    paddingVertical: 6,
  },
  composerConnectorName: { color: '#F7F7F7', fontSize: 14, fontWeight: '600', letterSpacing: -0.2, maxWidth: 160 },
  heroComposerRow: { alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end', marginTop: 8 },
  // Brand-blue accent send (DS PromptInput variant=accent), matching the flower
  // mark + "Superagent" accent word. Square with a 6px radius.
  heroSendButton: { alignItems: 'center', backgroundColor: '#3950E6', borderRadius: 6, height: 34, justifyContent: 'center', width: 34 },
  heroSendButtonDisabled: { opacity: 0.4 },
  heroIdeasLabel: { color: '#8E8E93', fontSize: 14, fontWeight: '500', marginBottom: 4, marginTop: 16, paddingHorizontal: 20, textAlign: 'center' },
  // --- Native top bar (DS mobile-web header parity: centered logo) ---
  topBar: { paddingHorizontal: 16 },
  topBarRow: { alignItems: 'center', flexDirection: 'row', height: 64, justifyContent: 'center' },
  // --- Idea suggestions (category-tabbed list, divided by separators) ---
  // Full-bleed band on the lighter DS "standard" surface (#111111 → white in
  // light / neutral-900 in dark), set off from the dark-stone hero canvas with
  // top+bottom separators — mirrors the web DS ideas section (surface-standard,
  // border-y).
  ideasSection: {
    backgroundColor: '#111111',
    borderBottomColor: '#1F1F23',
    borderBottomWidth: 1,
    borderTopColor: '#1F1F23',
    borderTopWidth: 1,
    marginTop: 16,
  },
  ideaCategoryContent: { paddingBottom: 4, paddingHorizontal: 16, paddingTop: 8 },
  ideaList: { paddingBottom: 96, paddingHorizontal: 20, paddingTop: 6 },
  ideaRow: { borderBottomColor: '#1F1F23', borderBottomWidth: 1, paddingVertical: 14 },
  ideaRowTitle: { color: '#F7F7F7', fontSize: 15, fontWeight: '700', letterSpacing: -0.2 },
  ideaRowDescription: { color: '#8E8E93', fontSize: 13, fontWeight: '400', lineHeight: 18, marginTop: 3 },
  ideaCardIconRow: { flexDirection: 'row', gap: 6, marginTop: 10 },
  ideaCardIcon: { borderRadius: 6, overflow: 'hidden' },
  placeholder: { flex: 1, padding: 20 },
  backButton: { alignSelf: 'flex-start', marginBottom: 24, paddingVertical: 8 },
  backButtonText: { color: '#FF5A1F', fontSize: 16, fontWeight: '700' },
  helperText: { color: '#73737A', fontSize: 12, fontWeight: '700', lineHeight: 18, marginTop: 12 },
  pressed: { opacity: 0.72 },
});