import { For, Show, createSignal, onMount } from 'solid-js';
import { BTN_GHOST, CARD } from '~/components/DashboardShell';

const STORAGE_KEY = 'nxtgauge_saved_jobs_v1';

type SavedJob = {
  id: string;
  title: string;
  company?: string;
  location?: string;
  salary?: string;
  saved_at: string;
};

function loadSaved(): SavedJob[] {
  try {
    const raw = window.localStorage.getItem(STORAGE_KEY);
    if (!raw) return [];
    const parsed = JSON.parse(raw);
    return Array.isArray(parsed) ? parsed : [];
  } catch {
    return [];
  }
}

function persist(list: SavedJob[]) {
  try {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
  } catch {
    // ignore
  }
}

export default function JobSeekerSavedJobsPage() {
  const [rows, setRows] = createSignal<SavedJob[]>([]);

  onMount(() => {
    setRows(loadSaved());
  });

  const removeRow = (id: string) => {
    const next = rows().filter((row) => row.id !== id);
    setRows(next);
    persist(next);
  };

  return (
    <div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
      <div style={CARD}>
        <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>Saved Jobs</p>
        <p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
          Jobs bookmarked for later. Saved locally on this device.
        </p>
      </div>

      <div style={CARD}>
        <div style={{ display: 'flex', 'justify-content': 'space-between', 'align-items': 'center', 'margin-bottom': '10px' }}>
          <p style={{ margin: '0', 'font-size': '16px', 'font-weight': '700', color: '#111827' }}>Bookmarked Jobs</p>
          <button type="button" onClick={() => setRows(loadSaved())} style={BTN_GHOST}>Refresh</button>
        </div>
        <Show when={rows().length === 0}>
          <p style={{ margin: '0', color: '#6B7280', 'font-size': '13px' }}>No saved jobs yet.</p>
        </Show>
        <Show when={rows().length > 0}>
          <div style={{ display: 'grid', gap: '10px' }}>
            <For each={rows()}>
              {(row) => (
                <div style={{ border: '1px solid #E5E7EB', 'border-radius': '12px', padding: '12px', background: '#FCFCFD' }}>
                  <div style={{ display: 'flex', 'justify-content': 'space-between', gap: '10px', 'flex-wrap': 'wrap' }}>
                    <div>
                      <p style={{ margin: '0', 'font-size': '14px', 'font-weight': '800', color: '#111827' }}>{row.title}</p>
                      <p style={{ margin: '4px 0 0', 'font-size': '12px', color: '#6B7280' }}>
                        {row.company || '—'} {row.location ? `• ${row.location}` : ''} {row.salary ? `• ${row.salary}` : ''}
                      </p>
                      <p style={{ margin: '4px 0 0', 'font-size': '12px', color: '#9CA3AF' }}>
                        Saved on {new Date(row.saved_at).toLocaleString('en-IN')}
                      </p>
                    </div>
                    <button type="button" onClick={() => removeRow(row.id)} style={{ ...BTN_GHOST, height: '32px', 'font-size': '12px', padding: '0 12px' }}>
                      Remove
                    </button>
                  </div>
                </div>
              )}
            </For>
          </div>
        </Show>
      </div>
    </div>
  );
}