<script setup lang="ts">
// Strict port of project/platform-collab.jsx `ChatScreen` (lines 261-435).
// 3 tabs: Workspaces / Channels / Retention, mirroring the source's data and
// per-tab structure.


import { chatWorkspaces, chatChannels } from '~/data/workspace'

const tab = ref<'workspaces' | 'channels' | 'retention'>('workspaces')
const newWsOpen = ref(false)
const openWs = ref<typeof chatWorkspaces[number] | null>(null)
const newExportOpen = ref(false)
const addOverrideOpen = ref(false)

const toast = useToast()

// Per-workspace and per-channel kebab actions — mirror source intent.
function wsAction(ws: typeof chatWorkspaces[number], id: string) {
  if (id === 'manage') openWs.value = ws
  else if (id === 'open') toast.info(`Opening ${ws.url}`)
  else if (id === 'invite') toast.info(`Invite link copied for ${ws.name}`)
  else if (id === 'archive') toast.warn(`${ws.name} archived`)
}
const wsItems = [
  { id: 'manage',  label: 'Manage workspace', icon: 'brush' as const },
  { id: 'open',    label: 'Open in browser',  icon: 'external' as const },
  { id: 'invite',  label: 'Copy invite link', icon: 'copy' as const },
  { id: 'sep1',    separator: true },
  { id: 'archive', label: 'Archive workspace', icon: 'trash' as const, danger: true },
]

function channelAction(name: string, id: string) {
  if (id === 'open') toast.info(`Opening #${name}`)
  else if (id === 'rename') toast.info(`Rename #${name}`)
  else if (id === 'archive') toast.warn(`#${name} archived`)
  else if (id === 'delete') toast.bad(`#${name} deleted`)
}
const channelItems = [
  { id: 'open',    label: 'Open channel',  icon: 'external' as const },
  { id: 'rename',  label: 'Rename',        icon: 'brush' as const },
  { id: 'archive', label: 'Archive',       icon: 'folder' as const },
  { id: 'sep1',    separator: true },
  { id: 'delete',  label: 'Delete channel', icon: 'trash' as const, danger: true },
]

function removeOverride(name: string) {
  toast.info(`${name} override removed`)
}

const retention = ref<'30d' | '365d' | '3year' | 'forever'>('365d')
const retentionOptions = [
  { v: '30d' as const,     label: '30 days',                      d: 'Short retention. Casual workspaces or strict privacy posture.' },
  { v: '365d' as const,    label: '365 days · recommended',       d: 'Useful for most teams. Channel history is searchable for a year.' },
  { v: '3year' as const,   label: '3 years · Danish bookkeeping', d: 'Compliant with Danish accounting retention requirements.' },
  { v: 'forever' as const, label: 'Forever',                      d: 'No automatic deletion. Required for some legal/regulated industries.' },
]

const overrides = [
  { name: '#incidents',     t: 'invert',  r: 'forever', reason: 'Post-mortem evidence' },
  { name: '#dezky-roadmap', t: 'info',    r: '3 years', reason: 'Product decisions log' },
  { name: '#random',        t: 'neutral', r: '90 days', reason: 'Reduce noise' },
] as const
</script>

<template>
  <div>
    <PageHeader
      eyebrow="Chat · Zulip"
      title="Chat settings"
      subtitle="Zulip workspaces, public channel visibility, and message retention policies."
    />
    <div class="tab-wrap">
      <Tabs
        v-model="tab"
        :items="[
          { value: 'workspaces', label: 'Workspaces', count: chatWorkspaces.length },
          { value: 'channels',   label: 'Channels',   count: chatChannels.length },
          { value: 'retention',  label: 'Retention' },
        ]"
      />
    </div>

    <div class="content">
      <template v-if="tab === 'workspaces'">
        <div class="row">
          <div class="lead">Workspaces let you separate communication scopes (e.g. company-wide vs. engineering-only). Members and channels are workspace-scoped.</div>
          <UiButton variant="primary" @click="newWsOpen = true">
            <template #leading><UiIcon name="plus" :size="14" /></template>
            New workspace
          </UiButton>
        </div>
        <div class="ws-grid">
          <Card v-for="w in chatWorkspaces" :key="w.id">
            <div class="ws-head">
              <div class="ws-title">
                <div class="ws-mark"><UiIcon name="chat" :size="18" /></div>
                <div>
                  <div class="ws-name">
                    <span>{{ w.name }}</span>
                    <Badge v-if="w.primary" tone="invert">primary</Badge>
                  </div>
                  <Mono dim>{{ w.url }}</Mono>
                </div>
              </div>
              <Badge tone="ok" dot>{{ w.status }}</Badge>
            </div>
            <div class="ws-stats">
              <div><Eyebrow>Members</Eyebrow><div class="ws-num">{{ w.members }}</div></div>
              <div><Eyebrow>Channels</Eyebrow><div class="ws-num">{{ w.channels }}</div></div>
              <div><Eyebrow>30d msgs</Eyebrow><div class="ws-num">{{ w.messages30d.toLocaleString('da-DK') }}</div></div>
            </div>
            <div class="ws-actions">
              <UiButton size="sm" variant="secondary" @click="toast.info(`Opening ${w.url}`)">
                <template #leading><UiIcon name="external" :size="13" /></template>
                Open
              </UiButton>
              <UiButton size="sm" variant="ghost" @click="openWs = w">Manage</UiButton>
              <div class="spacer" />
              <AdminKebabMenu :items="wsItems" @select="(id) => wsAction(w, id)" />
            </div>
          </Card>
        </div>
      </template>

      <template v-else-if="tab === 'channels'">
        <div class="ch-toolbar">
          <div class="input-search">
            <UiIcon name="search" :size="14" stroke="var(--text-mute)" />
            <input placeholder="Search channels…" />
          </div>
          <button class="chip"><Eyebrow>Type:</Eyebrow><span>All</span><UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
          <button class="chip"><Eyebrow>Workspace:</Eyebrow><span>All</span><UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
          <div class="spacer" />
          <Mono dim>{{ chatChannels.length }} channels</Mono>
        </div>
        <Card :pad="0">
          <table class="tbl">
            <thead>
              <tr><th>Channel</th><th>Topic</th><th>Type</th><th>Members</th><th class="right">30d msgs</th><th>Owner</th><th /></tr>
            </thead>
            <tbody>
              <tr v-for="c in chatChannels" :key="c.name">
                <td>
                  <span class="ch-name" :class="{ priv: c.type === 'private' }">{{ c.type === 'private' ? '🔒' : '#' }} {{ c.name }}</span>
                </td>
                <td class="topic">{{ c.topic }}</td>
                <td><Badge :tone="c.type === 'public' ? 'ok' : 'warn'">{{ c.type }}</Badge></td>
                <td><Mono>{{ c.members }}</Mono></td>
                <td class="right"><Mono>{{ c.messages30d.toLocaleString('da-DK') }}</Mono></td>
                <td>
                  <div class="owner-cell">
                    <Avatar :name="c.owner" :size="18" />
                    <span>{{ c.owner }}</span>
                  </div>
                </td>
                <td class="right"><AdminKebabMenu :items="channelItems" @select="(id) => channelAction(c.name, id)" /></td>
              </tr>
            </tbody>
          </table>
        </Card>
      </template>

      <template v-else>
        <div class="retention">
          <Card>
            <div class="card-head">
              <Eyebrow>Retention</Eyebrow>
              <div class="card-title">Message retention</div>
              <div class="card-sub">Applied org-wide. Compliance overrides user-level deletion.</div>
            </div>
            <div class="radio-big">
              <label v-for="o in retentionOptions" :key="o.v" :class="{ active: retention === o.v }">
                <span class="radio-dot"><span v-if="retention === o.v" /></span>
                <input type="radio" :value="o.v" v-model="retention" />
                <div>
                  <div class="radio-label">{{ o.label }}</div>
                  <div class="radio-d">{{ o.d }}</div>
                </div>
              </label>
            </div>
          </Card>

          <Card>
            <div class="card-head card-head-inline">
              <div>
                <Eyebrow>Per-channel</Eyebrow>
                <div class="card-title">Channel-level overrides</div>
              </div>
              <UiButton size="sm" variant="ghost" @click="addOverrideOpen = true">
                <template #leading><UiIcon name="plus" :size="13" /></template>
                Add override
              </UiButton>
            </div>
            <Card :pad="0" surface="bg" style="margin-top: 12px">
              <table class="tbl">
                <thead>
                  <tr><th>Channel</th><th>Retention</th><th>Reason</th><th /></tr>
                </thead>
                <tbody>
                  <tr v-for="o in overrides" :key="o.name">
                    <td><Mono style="font-weight: 500">{{ o.name }}</Mono></td>
                    <td><Badge :tone="o.t as any" dot>{{ o.r }}</Badge></td>
                    <td class="topic">{{ o.reason }}</td>
                    <td class="right"><UiButton size="sm" variant="ghost" @click="removeOverride(o.name)"><UiIcon name="x" :size="12" /></UiButton></td>
                  </tr>
                </tbody>
              </table>
            </Card>
          </Card>

          <Card>
            <div class="card-head card-head-inline">
              <div>
                <Eyebrow>Export & e-discovery</Eyebrow>
                <div class="card-title">Message export</div>
              </div>
              <UiButton size="sm" variant="secondary" @click="newExportOpen = true">New export</UiButton>
            </div>
            <div class="muted">Generate a signed ZIP of selected channels and date ranges for legal review or GDPR fulfillment. Available on Business and Enterprise plans.</div>
          </Card>
        </div>
      </template>
    </div>

    <Modal :open="newWsOpen" eyebrow="Chat · workspaces" title="New workspace" size="md" @close="newWsOpen = false">
      <div class="form-stack">
        <label class="field"><Eyebrow>Name</Eyebrow><input class="input" placeholder="engineering" /></label>
        <label class="field"><Eyebrow>URL</Eyebrow><input class="input" placeholder="eng.chat.dezky.com" /></label>
      </div>
      <template #footer>
        <UiButton variant="ghost" @click="newWsOpen = false">Cancel</UiButton>
        <UiButton variant="primary" @click="newWsOpen = false">Create workspace</UiButton>
      </template>
    </Modal>

    <!-- Per-channel retention override -->
    <Modal :open="addOverrideOpen" eyebrow="Chat · retention" title="Channel retention override" size="md" @close="addOverrideOpen = false">
      <div class="form-stack">
        <label class="field"><Eyebrow>Channel</Eyebrow><input class="input" placeholder="#incidents" /></label>
        <label class="field"><Eyebrow>Retention</Eyebrow>
          <select class="input">
            <option>30 days</option><option>90 days</option><option>365 days</option><option>3 years</option><option>Forever</option>
          </select>
        </label>
        <label class="field"><Eyebrow>Reason (audit)</Eyebrow><input class="input" placeholder="Post-mortem evidence" /></label>
      </div>
      <template #footer>
        <UiButton variant="ghost" @click="addOverrideOpen = false">Cancel</UiButton>
        <UiButton variant="primary" @click="addOverrideOpen = false; toast.ok('Override added')">Add override</UiButton>
      </template>
    </Modal>

    <!-- New e-discovery export -->
    <Modal :open="newExportOpen" eyebrow="Chat · export" title="New message export" size="md" @close="newExportOpen = false">
      <div class="form-stack">
        <label class="field"><Eyebrow>Channels</Eyebrow><input class="input" placeholder="#engineering, #incidents" /></label>
        <label class="field"><Eyebrow>From</Eyebrow><input class="input" placeholder="2026-01-01" /></label>
        <label class="field"><Eyebrow>To</Eyebrow><input class="input" placeholder="2026-12-31" /></label>
        <label class="field"><Eyebrow>Format</Eyebrow>
          <select class="input"><option>Signed ZIP · JSONL</option><option>Signed ZIP · HTML</option></select>
        </label>
      </div>
      <template #footer>
        <UiButton variant="ghost" @click="newExportOpen = false">Cancel</UiButton>
        <UiButton variant="primary" @click="newExportOpen = false; toast.info('Export queued · you will be emailed when ready')">Create export</UiButton>
      </template>
    </Modal>

    <SidePanel :open="!!openWs" eyebrow="Workspace" :title="openWs?.name || ''" width="lg" @close="openWs = null">
      <div v-if="openWs" class="manage">
        <div class="ws-head">
          <div class="ws-title">
            <div class="ws-mark big"><UiIcon name="chat" :size="22" /></div>
            <div>
              <div class="ws-name big">{{ openWs.name }}</div>
              <Mono dim>{{ openWs.url }}</Mono>
            </div>
          </div>
          <Badge tone="ok" dot>{{ openWs.status }}</Badge>
        </div>
      </div>
      <template #footer>
        <UiButton variant="ghost" @click="openWs = null">Close</UiButton>
        <div style="flex: 1" />
        <UiButton variant="primary" @click="openWs = null">Save changes</UiButton>
      </template>
    </SidePanel>
  </div>
</template>

<style scoped>
.tab-wrap { padding: 16px 40px 0 40px; }
.content { padding: 20px 40px 64px 40px; }

.row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lead { font-size: 13px; color: var(--text-mute); max-width: 540px; line-height: 1.5; }
.spacer { flex: 1; }

.ws-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ws-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ws-title { display: flex; align-items: center; gap: 12px; }
.ws-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ws-mark.big { width: 48px; height: 48px; border-radius: 10px; }
.ws-name { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.ws-name.big { font-size: 22px; }
.ws-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ws-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ws-actions { display: flex; gap: 8px; margin-top: 16px; align-items: center; }

.ch-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.input-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.chip span { font-weight: 500; }

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .right { text-align: right; }
.topic { font-size: 12px; color: var(--text-mute); }
.ch-name { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.ch-name.priv { color: var(--text-dim); }
.owner-cell { display: flex; align-items: center; gap: 6px; font-size: 12px; }

.retention { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.card-head { margin-bottom: 14px; }
.card-head-inline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin-top: 4px; }
.card-sub { font-size: 13px; color: var(--text-mute); margin-top: 4px; }
.muted { font-size: 13px; color: var(--text-mute); line-height: 1.6; }

.radio-big { display: flex; flex-direction: column; gap: 8px; }
.radio-big label { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.radio-big label.active { border-color: var(--text); background: var(--bg); }
.radio-big input { display: none; }
.radio-dot { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.radio-big label.active .radio-dot { border-color: var(--text); }
.radio-dot span { width: 8px; height: 8px; border-radius: 999px; background: var(--text); }
.radio-label { font-size: 14px; font-weight: 500; }
.radio-d { font-size: 12px; color: var(--text-mute); margin-top: 4px; }

.form-stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.input { height: 36px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--text); outline: none; }

.manage { padding-bottom: 24px; }
</style>
