import { useQuery } from '@tanstack/react-query';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { ParkingSquare } from 'lucide-react';
import { docsApi } from '../api/client';

export function CashParkingPage() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['docs', 'cash_parking'],
    queryFn: () => docsApi.get('cash_parking'),
    staleTime: 0, // always re-fetch to pick up file changes
  });

  return (
    <div style={{ padding: '28px 32px', maxWidth: 900, margin: '0 auto' }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 9,
          background: 'linear-gradient(135deg, var(--orange) 0%, #c2410c 100%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 2px 10px rgba(249,115,22,0.25)',
        }}>
          <ParkingSquare size={18} color="white" />
        </div>
        <div>
          <h1 style={{ fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 700, color: 'var(--text1)', margin: 0 }}>
            Cash Parking
          </h1>
          <div style={{ fontSize: 13, color: 'var(--text3)', marginTop: 2 }}>
            docs/cash_parking.md
          </div>
        </div>
      </div>

      {isLoading && (
        <div style={{ color: 'var(--text3)', fontFamily: 'var(--font-mono)', fontSize: 13 }}>
          Loading...
        </div>
      )}
      {error && (
        <div style={{ color: 'var(--red)', fontFamily: 'var(--font-mono)', fontSize: 13 }}>
          Failed to load: {String(error)}
        </div>
      )}
      {data && (
        <div className="md-body">
          <ReactMarkdown remarkPlugins={[remarkGfm]}>
            {data.content}
          </ReactMarkdown>
        </div>
      )}

      <style>{`
        .md-body { color: var(--text2); font-size: 14px; line-height: 1.75; }
        .md-body h1 { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--text1); margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
        .md-body h2 { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text1); margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
        .md-body h3 { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.06em; margin: 22px 0 8px; }
        .md-body h4 { font-size: 13px; font-weight: 600; color: var(--text1); margin: 16px 0 6px; }
        .md-body p { margin: 0 0 12px; }
        .md-body a { color: var(--cyan); text-decoration: none; }
        .md-body a:hover { text-decoration: underline; }
        .md-body strong { color: var(--text1); font-weight: 600; }
        .md-body em { color: var(--orange); font-style: italic; }
        .md-body code { font-family: var(--font-mono); font-size: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--cyan); }
        .md-body pre { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 12px 0 16px; }
        .md-body pre code { background: none; border: none; padding: 0; color: var(--text2); font-size: 12px; }
        .md-body ul, .md-body ol { padding-left: 22px; margin: 0 0 12px; }
        .md-body li { margin-bottom: 4px; }
        .md-body hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
        .md-body blockquote { border-left: 3px solid var(--orange); padding-left: 14px; color: var(--text3); margin: 12px 0; font-style: italic; }
        .md-body table { border-collapse: collapse; width: 100%; margin: 12px 0 20px; font-size: 13px; }
        .md-body th { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); background: var(--bg2); padding: 8px 12px; text-align: left; border: 1px solid var(--border); }
        .md-body td { padding: 7px 12px; border: 1px solid var(--border); vertical-align: top; }
        .md-body tr:nth-child(even) td { background: rgba(255,255,255,0.01); }
        .md-body tr:hover td { background: var(--bg2); }
      `}</style>
    </div>
  );
}
