App.js

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  Pressable,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import * as Clipboard from 'expo-clipboard';

import ChannelSlider from './src/components/ChannelSlider';
import CopyButton from './src/components/CopyButton';
import {
  clampKanal,
  hexKeRgb,
  kecerahan,
  rgbKeCss,
  rgbKeHex,
  rgbKeHsl,
  tintaKontras,
  turunanWarna,
  warnaAcak,
} from './src/color';
import { BRAND, PRESET, UI, WARNA_AWAL } from './src/theme';

// Tinggi bilah status: pada Android bilah dibuat transparan agar warna hero
// mengisi layar sampai ke tepi atas, sehingga paddingnya dipasang manual.
const INSET_ATAS =
  Platform.OS === 'android' ? StatusBar.currentHeight ?? 24 : 56;

/** Satu kotak warna yang dapat diketuk untuk diterapkan. */
function Swatch({ rgb, label, aktif, onPress }) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={label ? `Terapkan ${label}` : `Terapkan ${rgbKeHex(rgb)}`}
      onPress={onPress}
      style={({ pressed }) => [styles.swatchWadah, pressed && styles.swatchDitekan]}>
      <View
        style={[
          styles.swatch,
          { backgroundColor: rgbKeCss(rgb) },
          aktif && styles.swatchAktif,
        ]}
      />
      {label ? <Text style={styles.swatchLabel}>{label}</Text> : null}
    </Pressable>
  );
}

export default function App() {
  // 1. STATE — satu objek RGB sebagai sumber kebenaran tunggal.
  const [rgb, setRgb] = useState(WARNA_AWAL);
  const { r, g, b } = rgb;

  // Saat thumb sedang digeser, scroll dinonaktifkan supaya gestur horizontal
  // tidak direbut oleh ScrollView induk.
  const [bisaScroll, setBisaScroll] = useState(true);

  // 2. NILAI TURUNAN — dihitung ulang otomatis setiap state berubah.
  const hex = rgbKeHex(rgb);
  const hsl = rgbKeHsl(rgb);
  const tinta = tintaKontras(rgb);
  const terang = kecerahan(rgb) > 150;
  const turunan = useMemo(() => turunanWarna(rgb), [rgb]);

  const teksRgb = `rgb(${r}, ${g}, ${b})`;
  const teksHsl = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;

  // 3. INPUT HEX — pengikatan dua arah.
  // `draf` menyimpan teks mentah selama pengguna mengetik agar ketikan tidak
  // terpotong oleh normalisasi. Bila draf kosong, kolom menampilkan `hex`,
  // sehingga perubahan dari kontrol mana pun langsung terlihat di sini.
  const [draf, setDraf] = useState(null);

  const ubahTeksHex = (teks) => {
    // Batasi ke karakter heksadesimal, maksimal 6 digit, selalu diawali '#'.
    const digit = teks.replace(/[^0-9a-fA-F]/g, '').slice(0, 6).toUpperCase();
    setDraf(`#${digit}`);
    const hasil = hexKeRgb(digit);
    if (hasil) setRgb(hasil);
  };

  // Draf dilepas saat selesai; teks tidak valid kembali ke warna yang aktif.
  const selesaiMengetik = () => setDraf(null);

  // 4. AKSI
  // Semua kontrol selain kolom teks memakai jalur ini: draf dilepas supaya
  // kolom HEX ikut diperbarui walau masih memegang fokus. Nilai berikutnya
  // boleh berupa fungsi agar penekanan tombol beruntun tidak saling menimpa.
  const terapkanWarna = (berikutnya) => {
    setDraf(null);
    setRgb(berikutnya);
  };

  const acak = () => terapkanWarna(warnaAcak());
  const setel = (kanal, nilai) =>
    terapkanWarna((lama) => ({ ...lama, [kanal]: clampKanal(nilai) }));
  const setelMerah = (v) => setel('r', v);
  const setelHijau = (v) => setel('g', v);
  const setelBiru = (v) => setel('b', v);
  const saatGeser = useCallback((geser) => setBisaScroll(!geser), []);

  // 5. SALIN KE PAPAN KLIP
  // `tersalin` menyimpan kunci format yang baru disalin agar tombolnya
  // menampilkan konfirmasi sesaat.
  const [tersalin, setTersalin] = useState(null);
  const jedaSalin = useRef(null);

  const salin = async (kunci, teks) => {
    await Clipboard.setStringAsync(teks);
    setTersalin(kunci);
    if (jedaSalin.current) clearTimeout(jedaSalin.current);
    jedaSalin.current = setTimeout(() => setTersalin(null), 1500);
  };

  // Batalkan penghitung waktu bila layar dilepas agar tidak memperbarui
  // komponen yang sudah tidak terpasang.
  useEffect(
    () => () => {
      if (jedaSalin.current) clearTimeout(jedaSalin.current);
    },
    [],
  );

  // Gradasi tiap track dihitung dari dua kanal lainnya, sehingga bilah selalu
  // memperlihatkan warna yang akan dihasilkan pada setiap posisi.
  const gradasiMerah = useCallback((v) => ({ r: v, g, b }), [g, b]);
  const gradasiHijau = useCallback((v) => ({ r, g: v, b }), [r, b]);
  const gradasiBiru = useCallback((v) => ({ r, g, b: v }), [r, g]);

  return (
    <View style={styles.akar}>
      <StatusBar
        translucent
        backgroundColor="transparent"
        barStyle={terang ? 'dark-content' : 'light-content'}
      />

      <KeyboardAvoidingView
        style={styles.akar}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
        <ScrollView
          scrollEnabled={bisaScroll}
          keyboardShouldPersistTaps="handled"
          keyboardDismissMode="on-drag"
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.isi}>
          {/* HERO — seluruh area atas ikut berubah warna secara langsung. */}
          <View style={[styles.hero, { backgroundColor: hex }]}>
            <View style={styles.heroBaris}>
              <Text style={[styles.judul, { color: tinta }]}>ChromaCode</Text>
              <View
                style={[
                  styles.pil,
                  { borderColor: tinta, opacity: terang ? 0.55 : 0.75 },
                ]}>
                <Text style={[styles.pilTeks, { color: tinta }]}>RGB → HEX</Text>
              </View>
            </View>

            {/* Kode HEX besar juga berfungsi sebagai pintasan salin. */}
            <Pressable
              accessibilityRole="button"
              accessibilityLabel={`Salin kode HEX ${hex}`}
              onPress={() => salin('hex', hex)}
              style={({ pressed }) => pressed && styles.heroDitekan}>
              <Text style={[styles.heroHex, { color: tinta }]}>{hex}</Text>
              <Text style={[styles.heroPetunjuk, { color: tinta }]}>
                {tersalin === 'hex' ? '✓ Tersalin' : 'Ketuk untuk menyalin'}
              </Text>
            </Pressable>

            <Text style={[styles.heroDetail, { color: tinta }]}>{teksRgb}</Text>
            <Text style={[styles.heroDetail, { color: tinta, opacity: 0.7 }]}>
              {`hsl(${hsl.h}°, ${hsl.s}%, ${hsl.l}%)`}
            </Text>
          </View>

          {/* LEMBAR KONTROL */}
          <View style={styles.lembar}>
            {/* Input HEX — mengetik di sini menggerakkan ketiga slider. */}
            <View style={styles.kartu}>
              <Text style={styles.kartuJudul}>Kode HEX</Text>
              <View style={styles.barisInput}>
                <View style={[styles.contoh, { backgroundColor: hex }]} />
                <TextInput
                  style={styles.input}
                  value={draf ?? hex}
                  onChangeText={ubahTeksHex}
                  onBlur={selesaiMengetik}
                  onSubmitEditing={() => {
                    selesaiMengetik();
                    Keyboard.dismiss();
                  }}
                  autoCapitalize="characters"
                  autoCorrect={false}
                  spellCheck={false}
                  maxLength={7}
                  returnKeyType="done"
                  selectTextOnFocus
                  placeholder="#000000"
                  placeholderTextColor={UI.tintaSamar}
                  accessibilityLabel="Kode HEX warna"
                />
              </View>
              <Text style={styles.petunjuk}>
                Ketik 3 atau 6 digit heksadesimal untuk mengatur warna.
              </Text>
            </View>

            {/* Salin warna aktif dalam format yang dibutuhkan. */}
            <View style={styles.kartu}>
              <Text style={styles.kartuJudul}>Salin Kode</Text>
              <View style={styles.barisSalin}>
                <CopyButton
                  label="HEX"
                  nilai={hex}
                  tersalin={tersalin === 'hex'}
                  onPress={() => salin('hex', hex)}
                />
                <CopyButton
                  label="RGB"
                  nilai={teksRgb}
                  pratinjau={`${r}, ${g}, ${b}`}
                  tersalin={tersalin === 'rgb'}
                  onPress={() => salin('rgb', teksRgb)}
                />
                <CopyButton
                  label="HSL"
                  nilai={teksHsl}
                  pratinjau={`${hsl.h}°, ${hsl.s}%, ${hsl.l}%`}
                  tersalin={tersalin === 'hsl'}
                  onPress={() => salin('hsl', teksHsl)}
                />
              </View>
            </View>

            {/* Tiga kontrol geser kanal warna. */}
            <View style={styles.kartu}>
              <Text style={styles.kartuJudul}>Kanal Warna</Text>

              <ChannelSlider
                label="Red (Merah)"
                huruf="R"
                value={r}
                onChange={setelMerah}
                onDragStateChange={saatGeser}
                aksen={BRAND.merah}
                warnaSegmen={gradasiMerah}
              />

              <ChannelSlider
                label="Green (Hijau)"
                huruf="G"
                value={g}
                onChange={setelHijau}
                onDragStateChange={saatGeser}
                aksen={BRAND.hijau}
                warnaSegmen={gradasiHijau}
              />

              <ChannelSlider
                label="Blue (Biru)"
                huruf="B"
                value={b}
                onChange={setelBiru}
                onDragStateChange={saatGeser}
                aksen={BRAND.biru}
                warnaSegmen={gradasiBiru}
              />

              <View style={styles.barisAksi}>
                <Pressable
                  accessibilityRole="button"
                  onPress={acak}
                  style={({ pressed }) => [
                    styles.tombol,
                    styles.tombolUtama,
                    pressed && styles.tombolDitekan,
                  ]}>
                  <Text style={styles.tombolUtamaTeks}>🎲  Warna Acak</Text>
                </Pressable>

                <Pressable
                  accessibilityRole="button"
                  onPress={() => terapkanWarna(WARNA_AWAL)}
                  style={({ pressed }) => [
                    styles.tombol,
                    styles.tombolSekunder,
                    pressed && styles.tombolDitekan,
                  ]}>
                  <Text style={styles.tombolSekunderTeks}>Atur Ulang</Text>
                </Pressable>
              </View>
            </View>

            {/* Turunan warna: tiga versi terang, warna asli, tiga versi gelap. */}
            <View style={styles.kartu}>
              <Text style={styles.kartuJudul}>Turunan Warna</Text>
              <View style={styles.barisSwatch}>
                {turunan.map((warna, i) => (
                  <Swatch
                    key={i}
                    rgb={warna}
                    aktif={i === 3}
                    onPress={() => terapkanWarna(warna)}
                  />
                ))}
              </View>
              <Text style={styles.petunjuk}>
                Ketuk salah satu kotak untuk menjadikannya warna aktif.
              </Text>
            </View>

            {/* Preset warna program studi. */}
            <View style={styles.kartu}>
              <Text style={styles.kartuJudul}>Palet Program Studi</Text>
              <View style={styles.barisSwatch}>
                {PRESET.map((p) => {
                  const warna = hexKeRgb(p.hex);
                  return (
                    <Swatch
                      key={p.hex}
                      rgb={warna}
                      label={p.nama}
                      aktif={p.hex.toUpperCase() === hex}
                      onPress={() => terapkanWarna(warna)}
                    />
                  );
                })}
              </View>
            </View>

            <View style={styles.footer}>
              <Text style={styles.footerTeks}>Universitas Insan Mahardika</Text>
              <Text style={styles.footerTeks}>Program Studi Informatika</Text>
            </View>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </View>
  );
}

const styles = StyleSheet.create({
  akar: {
    flex: 1,
    backgroundColor: UI.latar,
  },
  isi: {
    paddingBottom: 40,
  },

  hero: {
    paddingTop: INSET_ATAS + 24,
    paddingHorizontal: 24,
    paddingBottom: 52,
  },
  heroBaris: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  judul: {
    fontSize: 20,
    fontWeight: '800',
    letterSpacing: 0.3,
  },
  pil: {
    borderWidth: 1,
    borderRadius: 999,
    paddingHorizontal: 10,
    paddingVertical: 4,
  },
  pilTeks: {
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 0.5,
  },
  heroHex: {
    marginTop: 28,
    fontSize: 52,
    fontWeight: '800',
    letterSpacing: 2,
  },
  heroDitekan: {
    opacity: 0.65,
  },
  heroPetunjuk: {
    marginTop: 2,
    marginBottom: 10,
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 0.5,
    opacity: 0.6,
  },
  heroDetail: {
    marginTop: 4,
    fontSize: 13,
    fontWeight: '600',
    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
  },

  lembar: {
    marginTop: -32,
    paddingTop: 20,
    paddingHorizontal: 16,
    borderTopLeftRadius: 28,
    borderTopRightRadius: 28,
    backgroundColor: UI.latar,
  },
  kartu: {
    backgroundColor: UI.permukaan,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: UI.garis,
    padding: 18,
    marginBottom: 14,
  },
  kartuJudul: {
    fontSize: 12,
    fontWeight: '800',
    letterSpacing: 1,
    textTransform: 'uppercase',
    color: UI.tintaSamar,
    marginBottom: 14,
  },

  barisInput: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  contoh: {
    width: 44,
    height: 44,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: UI.garis,
    marginRight: 12,
  },
  input: {
    flex: 1,
    height: 48,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: UI.garis,
    backgroundColor: UI.permukaanLembut,
    paddingHorizontal: 14,
    fontSize: 18,
    fontWeight: '700',
    letterSpacing: 1.5,
    color: UI.tinta,
    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
  },
  petunjuk: {
    marginTop: 12,
    fontSize: 12,
    color: UI.tintaSamar,
  },

  barisSalin: {
    flexDirection: 'row',
    gap: 8,
  },

  barisAksi: {
    flexDirection: 'row',
    marginTop: 4,
  },
  tombol: {
    height: 50,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
  },
  tombolDitekan: {
    opacity: 0.75,
  },
  tombolUtama: {
    flex: 1,
    backgroundColor: BRAND.informatika,
  },
  tombolUtamaTeks: {
    color: UI.tinta,
    fontSize: 15,
    fontWeight: '800',
  },
  tombolSekunder: {
    marginLeft: 10,
    paddingHorizontal: 18,
    backgroundColor: UI.permukaanLembut,
    borderWidth: 1,
    borderColor: UI.garis,
  },
  tombolSekunderTeks: {
    color: UI.tintaLembut,
    fontSize: 15,
    fontWeight: '700',
  },

  barisSwatch: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginHorizontal: -4,
  },
  swatchWadah: {
    alignItems: 'center',
    paddingHorizontal: 4,
    marginBottom: 8,
  },
  swatchDitekan: {
    opacity: 0.7,
  },
  swatch: {
    width: 40,
    height: 40,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: UI.garis,
  },
  swatchAktif: {
    borderWidth: 3,
    borderColor: UI.tinta,
  },
  swatchLabel: {
    marginTop: 6,
    fontSize: 10,
    fontWeight: '600',
    color: UI.tintaSamar,
  },

  footer: {
    marginTop: 6,
    paddingTop: 14,
    borderTopWidth: 3,
    borderTopColor: BRAND.informatika,
    alignItems: 'center',
  },
  footerTeks: {
    fontSize: 12,
    color: UI.tintaSamar,
  },
});