// settings.jsx — หน้าเชื่อมต่อฐานข้อมูล (Supabase) + คู่มือติดตั้ง

const SQL_TABLE = `-- 1) สร้างตารางเก็บงานซ่อม
create table if not exists public.jobs (
  id text primary key,
  phone text,
  customer_name text,
  status text,
  created_at timestamptz default now(),
  data jsonb not null
);
create index if not exists jobs_phone_idx on public.jobs (phone);
create index if not exists jobs_created_idx on public.jobs (created_at desc);

-- 2) เปิด Row Level Security
alter table public.jobs enable row level security;

-- 3) นโยบายเริ่มต้น (เปิดให้ใช้งานได้ทันที)
create policy "jobs_read"   on public.jobs for select using (true);
create policy "jobs_insert" on public.jobs for insert with check (true);
create policy "jobs_update" on public.jobs for update using (true);
create policy "jobs_delete" on public.jobs for delete using (true);`;

const SQL_STORAGE = `-- ที่เก็บรูป (Storage bucket)
insert into storage.buckets (id, name, public)
values ('repair-photos', 'repair-photos', true)
on conflict (id) do nothing;

create policy "photos_read"  on storage.objects
  for select using (bucket_id = 'repair-photos');
create policy "photos_write" on storage.objects
  for insert with check (bucket_id = 'repair-photos');`;

// SQL ทางเลือก: รัดกุมสิทธิ์ให้เฉพาะพนักงานที่ล็อกอินแก้ไขได้ ส่วนลูกค้าอ่านสถานะได้
const SQL_SECURE = `-- เมื่อพร้อมใช้จริง: ให้เฉพาะพนักงานที่ล็อกอินเขียน/แก้ไข/ลบได้
-- (ลูกค้ายังเช็คสถานะได้ เพราะ select ยังเปิดอ่าน)
drop policy if exists "jobs_insert" on public.jobs;
drop policy if exists "jobs_update" on public.jobs;
drop policy if exists "jobs_delete" on public.jobs;
create policy "jobs_insert_auth" on public.jobs
  for insert to authenticated with check (true);
create policy "jobs_update_auth" on public.jobs
  for update to authenticated using (true);
create policy "jobs_delete_auth" on public.jobs
  for delete to authenticated using (true);

-- รูป: ให้เฉพาะพนักงานที่ล็อกอินอัปโหลดได้
drop policy if exists "photos_write" on storage.objects;
create policy "photos_write_auth" on storage.objects
  for insert to authenticated with check (bucket_id = 'repair-photos');`;

function CopyBtn({ text, label = 'คัดลอก' }) {
  const [done, setDone] = React.useState(false);
  return (
    <button type="button" className="pc-copy" onClick={() => {
      navigator.clipboard && navigator.clipboard.writeText(text);
      setDone(true); setTimeout(() => setDone(false), 1500);
    }}>
      <Icon name={done ? 'check' : 'fileText'} size={14} /> {done ? 'คัดลอกแล้ว' : label}
    </button>
  );
}

function CodeBlock({ code }) {
  return (
    <div className="pc-code">
      <CopyBtn text={code} />
      <pre><code>{code}</code></pre>
    </div>
  );
}

function StaffAccounts() {
  const online = isOnline();
  const user = Auth.user();
  // online: สมัครบัญชีพนักงานใหม่
  const [email, setEmail] = React.useState('');
  const [pass, setPass] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState(null);
  // local: ตั้งรหัสผ่านในเครื่อง
  const cred = getLocalCred();
  const [lu, setLu] = React.useState(cred.user);
  const [lp, setLp] = React.useState(cred.pass);

  const doSignup = async () => {
    setBusy(true); setMsg(null);
    try { await Auth.signUp(email, pass); setMsg({ ok: true, t: 'สร้างบัญชีแล้ว — หากเปิด Email confirmation ใน Supabase พนักงานต้องยืนยันอีเมลก่อนล็อกอิน' }); setEmail(''); setPass(''); }
    catch (e) { setMsg({ ok: false, t: e.message }); }
    setBusy(false);
  };
  const saveLocal = () => {
    if (!lu.trim() || !lp) { setMsg({ ok: false, t: 'กรอกชื่อผู้ใช้และรหัสผ่าน' }); return; }
    setLocalCred({ user: lu.trim(), pass: lp, name: 'พนักงาน' });
    setMsg({ ok: true, t: 'บันทึกรหัสผ่านโหมดทดลองแล้ว' });
  };

  return (
    <section className="pc-card">
      <div className="pc-card__title"><Icon name="user" size={18} /> บัญชีพนักงาน</div>
      <div className="pc-card__body" style={{ gridTemplateColumns: '1fr' }}>
        {user && <div className="pc-result is-ok"><Icon name="check" size={15} /> ล็อกอินอยู่: <b>&nbsp;{user.name}</b></div>}
        {msg && <div className={`pc-result ${msg.ok ? 'is-ok' : 'is-err'}`}><Icon name={msg.ok ? 'check' : 'info'} size={15} /> {msg.t}</div>}

        {online ? (
          <>
            <p className="pc-prose">เพิ่มพนักงานได้ที่ <b>Supabase → Authentication → Users → Add user</b> (กำหนดอีเมล/รหัสผ่าน) หรือสร้างจากตรงนี้ (ต้องเปิด Email signups ใน Supabase):</p>
            <div className="pc-acct-form">
              <input className="pc-input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="อีเมลพนักงานใหม่" />
              <input className="pc-input" type="password" value={pass} onChange={e => setPass(e.target.value)} placeholder="รหัสผ่าน (อย่างน้อย 6 ตัว)" />
              <Button variant="secondary" icon="plus" onClick={doSignup} disabled={busy || !email || pass.length < 6}>{busy ? 'กำลังสร้าง…' : 'สร้างบัญชี'}</Button>
            </div>
          </>
        ) : (
          <>
            <p className="pc-prose">โหมดทดลองใช้รหัสผ่านในเครื่องนี้ (ตั้งค่าได้) — เมื่อเชื่อมต่อ Supabase แล้วจะใช้บัญชีอีเมลจริงแทน</p>
            <div className="pc-acct-form">
              <input className="pc-input" value={lu} onChange={e => setLu(e.target.value)} placeholder="ชื่อผู้ใช้" />
              <input className="pc-input" type="text" value={lp} onChange={e => setLp(e.target.value)} placeholder="รหัสผ่าน" />
              <Button variant="secondary" icon="save" onClick={saveLocal}>บันทึก</Button>
            </div>
          </>
        )}
      </div>
    </section>
  );
}

function Settings({ onChanged }) {
  const cfg = getSupaConfig();
  const [url, setUrl] = React.useState(cfg ? cfg.url : '');
  const [key, setKey] = React.useState(cfg ? cfg.key : '');
  const [siteUrl, setSiteUrlVal] = React.useState(getSiteUrl());
  const [testing, setTesting] = React.useState(false);
  const [result, setResult] = React.useState(null);
  const [pushing, setPushing] = React.useState(false);
  const [guideOpen, setGuideOpen] = React.useState(!isOnline());
  const online = isOnline();

  const doTest = async () => {
    setTesting(true); setResult(null);
    try {
      const r = await DB.testConnection({ url, key });
      setResult(r.ok ? { ok: true, msg: 'เชื่อมต่อสำเร็จ! พบตาราง jobs พร้อมใช้งาน' }
                      : { ok: false, msg: 'เชื่อมต่อไม่ได้ (' + r.status + ') — ตรวจ URL/Key และว่าได้สร้างตาราง jobs แล้วหรือยัง' });
    } catch (e) {
      setResult({ ok: false, msg: 'เชื่อมต่อไม่ได้: ' + e.message + ' (ตรวจ URL ให้ถูกต้อง)' });
    }
    setTesting(false);
  };

  const doSave = () => {
    setSupaConfig({ url, key });
    setResult({ ok: true, msg: 'บันทึกแล้ว — ระบบกำลังใช้ฐานข้อมูลออนไลน์' });
    onChanged && onChanged();
  };
  const doDisconnect = () => {
    setSupaConfig(null); setUrl(''); setKey(''); setResult(null);
    onChanged && onChanged();
  };
  const doPush = async () => {
    setPushing(true);
    try { const n = await DB.pushLocalSeed(); setResult({ ok: true, msg: 'ส่งข้อมูลตัวอย่างขึ้นฐานข้อมูลแล้ว ' + n + ' รายการ' }); onChanged && onChanged(); }
    catch (e) { setResult({ ok: false, msg: 'ส่งข้อมูลไม่สำเร็จ: ' + e.message }); }
    setPushing(false);
  };

  return (
    <div className="pc-page pc-page--form">
      <div className="pc-page__head">
        <div>
          <h1 className="pc-h1">เชื่อมต่อฐานข้อมูล</h1>
          <p className="pc-sub">เก็บข้อมูลออนไลน์ ใช้ร่วมกันได้หลายเครื่อง · Online database</p>
        </div>
        <span className={`pc-mode pc-mode--${online ? 'on' : 'off'}`}>
          <i /> {online ? 'ออนไลน์ (Supabase)' : 'โหมดทดลอง (เครื่องนี้)'}
        </span>
      </div>

      <div className="pc-banner" data-tone={online ? 'green' : 'amber'}>
        <Icon name={online ? 'check' : 'info'} size={18} />
        <div>
          {online
            ? <>ขณะนี้ข้อมูลถูกบันทึกบนฐานข้อมูลออนไลน์ — ทุกเครื่องที่เปิดเว็บนี้และใส่คีย์เดียวกันจะเห็นข้อมูลตรงกัน และลูกค้าเช็คสถานะผ่าน QR ได้จากทุกที่</>
            : <>ขณะนี้เป็น “โหมดทดลอง” — ข้อมูลเก็บในเบราว์เซอร์เครื่องนี้เท่านั้น (ยังไม่แชร์ข้ามเครื่อง) ทำตามขั้นตอนด้านล่างเพื่อเปิดใช้ฐานข้อมูลออนไลน์</>}
        </div>
      </div>

      <div className="pc-form-grid">
        <section className="pc-card">
          <div className="pc-card__title"><Icon name="qr" size={18} /> คีย์เชื่อมต่อ Supabase</div>
          <div className="pc-card__body">
            <label className="pc-field pc-field--full">
              <span className="pc-field__label">Project URL</span>
              <input className="pc-input pc-mono" value={url} onChange={e => setUrl(e.target.value)} placeholder="https://xxxx.supabase.co" />
              <span className="pc-field__hint">หาได้ที่ Supabase → Project Settings → Data API → Project URL</span>
            </label>
            <label className="pc-field pc-field--full">
              <span className="pc-field__label">anon public key</span>
              <textarea className="pc-input pc-textarea pc-mono" rows={3} value={key} onChange={e => setKey(e.target.value)} placeholder="eyJhbGciOi..." style={{ fontSize: 12 }} />
              <span className="pc-field__hint">คีย์ “anon / public” (ไม่ใช่ service_role) — ปลอดภัยที่จะใส่ในเว็บฝั่งลูกค้า</span>
            </label>
            {result && <div className={`pc-result ${result.ok ? 'is-ok' : 'is-err'}`}><Icon name={result.ok ? 'check' : 'info'} size={15} /> {result.msg}</div>}
            <div className="pc-field--full" style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <Button variant="secondary" icon="refresh" onClick={doTest} disabled={testing || !url || !key}>{testing ? 'กำลังทดสอบ…' : 'ทดสอบการเชื่อมต่อ'}</Button>
              <Button variant="primary" icon="save" onClick={doSave} disabled={!url || !key}>บันทึก &amp; เชื่อมต่อ</Button>
              {online && <Button variant="ghost" onClick={doDisconnect}>ตัดการเชื่อมต่อ</Button>}
            </div>
            {online && (
              <div className="pc-field--full">
                <div className="pc-info-sep" />
                <Button variant="secondary" size="sm" icon="arrowRight" onClick={doPush} disabled={pushing}>
                  {pushing ? 'กำลังส่ง…' : 'ส่งข้อมูลตัวอย่างจากเครื่องนี้ขึ้นฐานข้อมูล (ครั้งเดียว)'}
                </Button>
              </div>
            )}
          </div>
        </section>

        <section className="pc-card">
          <div className="pc-card__title"><Icon name="store" size={18} /> แนะนำที่ฝากเว็บ (ฟรี)</div>
          <div className="pc-card__body" style={{ gridTemplateColumns: '1fr' }}>
            <label className="pc-field pc-field--full">
              <span className="pc-field__label"><Icon name="qr" size={14} style={{ display: 'inline', verticalAlign: '-2px' }} /> URL เว็บไซต์ร้าน (สำหรับ QR Code)</span>
              <input className="pc-input pc-mono" value={siteUrl} onChange={e => setSiteUrlVal(e.target.value)}
                placeholder="https://yourshop.netlify.app/ระบบรับซ่อม พี.ซี. เซอร์วิส.html" />
              <span className="pc-field__hint">
                {siteUrl
                  ? <>QR ในใบรับซ่อมจะชี้ไปที่: <b className="pc-mono" style={{ color: 'var(--accent)' }}>{siteUrl}#/track/...</b></>
                  : <>ยังไม่ได้ตั้งค่า — QR จะชี้ไปที่ URL ของหน้าปัจจุบัน (ใช้ได้เมื่อนำเว็บขึ้นโฮสต์แล้ว)</>}
              </span>
            </label>
            <Button variant="secondary" icon="save" size="sm" onClick={() => { setSiteUrl(siteUrl); setResult({ ok: true, msg: 'บันทึก URL สำหรับ QR แล้ว' + (siteUrl ? '' : ' (ใช้ URL ปัจจุบัน)') }); }}>บันทึก URL</Button>
            <div className="pc-info-sep" />
            <p className="pc-prose">เว็บนี้เป็นไฟล์ static — ฝากที่ไหนก็ได้ ลากไฟล์ขึ้นแล้วใช้ได้ทันที:</p>
            <ul className="pc-hosts">
              <li><b>Netlify</b><span>ลากโฟลเดอร์ขึ้นที่ app.netlify.com/drop — ได้ลิงก์ฟรีทันที</span></li>
              <li><b>Vercel</b><span>เชื่อม GitHub แล้ว deploy อัตโนมัติ — เหมาะถ้าจะแก้บ่อย</span></li>
              <li><b>Cloudflare Pages</b><span>ฟรี เร็ว มีโดเมนให้ ต่อโดเมนร้านเองได้</span></li>
            </ul>
            <p className="pc-prose">ฐานข้อมูล + รูป ใช้ <b>Supabase</b> แยกต่างหาก (ฟรี tier) — เว็บกับฐานข้อมูลคนละที่ แต่ทำงานร่วมกัน</p>
          </div>
        </section>
      </div>

      <StaffAccounts />

      <section className="pc-card" style={{ marginTop: 18 }}>
        <button className="pc-card__title" style={{ width: '100%', cursor: 'pointer', background: 'var(--surface-2)', border: 'none', textAlign: 'left' }} onClick={() => setGuideOpen(o => !o)}>
          <Icon name="fileText" size={18} /> คู่มือติดตั้งทีละขั้น (Supabase)
          <Icon name="chevronDown" size={18} style={{ marginLeft: 'auto', transform: guideOpen ? 'rotate(180deg)' : 'none', transition: '.2s' }} />
        </button>
        {guideOpen && (
          <div className="pc-card__body" style={{ gridTemplateColumns: '1fr' }}>
            <ol className="pc-steps">
              <li><b>สมัคร Supabase</b> ที่ supabase.com (ฟรี) แล้วกด <i>New project</i> ตั้งชื่อ เช่น <code>pcservice</code> ตั้งรหัสฐานข้อมูล และเลือก Region <i>Southeast Asia (Singapore)</i></li>
              <li><b>สร้างตาราง</b> ไปที่เมนู <i>SQL Editor</i> → วางโค้ดนี้ → กด <i>Run</i>:
                <CodeBlock code={SQL_TABLE} />
              </li>
              <li><b>สร้างที่เก็บรูป</b> ใน <i>SQL Editor</i> วางโค้ดนี้ → <i>Run</i> (หรือสร้าง Bucket ชื่อ <code>repair-photos</code> แบบ public ที่เมนู Storage):
                <CodeBlock code={SQL_STORAGE} />
              </li>
              <li><b>คัดลอกคีย์</b> ไปที่ <i>Project Settings → Data API</i> คัดลอก <i>Project URL</i> และ <i>anon public</i> key มาวางในช่องด้านบน แล้วกด <i>ทดสอบการเชื่อมต่อ</i> → <i>บันทึก &amp; เชื่อมต่อ</i></li>
              <li><b>ส่งข้อมูลตัวอย่าง</b> (ถ้าต้องการ) กดปุ่ม “ส่งข้อมูลตัวอย่าง…” เพื่อย้ายงานสาธิตขึ้นฐานข้อมูล จากนั้นเริ่มรับงานจริงได้เลย</li>
              <li><b>นำเว็บขึ้นโฮสต์</b> อัปโหลดไฟล์ทั้งหมดขึ้น Netlify/Vercel/Cloudflare แล้วเปิดลิงก์จากเครื่องไหนก็ได้ — ใส่คีย์ชุดเดิม ข้อมูลจะตรงกันทุกเครื่อง</li>
              <li><b>เพิ่มบัญชีพนักงาน</b> ที่ <i>Authentication → Users → Add user</i> (อีเมล + รหัสผ่าน) เพื่อให้พนักงานล็อกอินเข้าระบบได้</li>
              <li><b>(แนะนำ) รัดกุมความปลอดภัย</b> เมื่อเริ่มใช้จริง รันชุดนี้เพื่อให้เฉพาะพนักงานที่ล็อกอินแก้ไขข้อมูล/อัปโหลดรูปได้ (ลูกค้ายังเช็คสถานะได้):
                <CodeBlock code={SQL_SECURE} />
              </li>
            </ol>
            <div className="pc-banner" data-tone="amber" style={{ marginTop: 4 }}>
              <Icon name="info" size={18} />
              <div><b>ความปลอดภัย:</b> ตอนนี้ระบบมี <b>หน้าล็อกอินพนักงาน</b>แล้ว — โหมดออนไลน์ใช้บัญชีอีเมลจริงจาก Supabase Auth นโยบายฐานข้อมูลเริ่มต้นยังเปิดให้เขียนได้ทั่วไปเพื่อให้เริ่มง่าย เมื่อพร้อมใช้จริงแนะนำรัน SQL ข้อ “รัดกุมความปลอดภัย” ด้านบนเพื่อจำกัดการแก้ไขเฉพาะพนักงานที่ล็อกอิน</div>
            </div>
          </div>
        )}
      </section>
    </div>
  );
}

Object.assign(window, { Settings });